layer插件layer.photos()动态插入的图片无法正常显示
layer插件layer.photos()动态插入的图片无法正常显示,点击后面插入的图片,显示的是之前的图片列表,再次点击又是正常
有朋友遇到同样的问题
http://fly.layui.com/jie/4124.html
layer v2.4 弹层组件
layer.photos动态插入图片后,点击新插入的图片会弹出插入前的最后一张图片。
如果再次调用layer.photos,点击新图片会提示错误:
layer.js:1006 Uncaught TypeError: Cannot read property 'src' of undefined
现在的解决办法是在layer.js中的第902行的
loop || parent.on('click', options.img, function(){
改为
loop || parent.off('click').on('click', options.img, function(){
不知道有没有什么更好的办法可以解决动态插入图片的问题。![]()
我的解决办法是:
点击之前,先把图片data数据弄好

把上面的代码改成
loop || parent.on('click', options.img, function(){
pushData();
var othis = $(this), index = othis.attr('layer-index');
layer.photos($.extend(options, {
photos: {
start: index,
data: data,
tab: options.tab
},
full: options.full
}), true);
})
解决!!
这样改后,无论是增加图片,还是移除图片,效果正常
使用tips:
1.如果需要重复执行layer.photos(),避免重复创建遮罩,可以加上id参数避免重复创建!
//调用示例
layer.photos({
id: 'img',
photos: '#layer-photos-demo'
,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
});
2. layer.photos(),options.photos参数最好使用页面上存在DOM结构,因为是使用事件委托绑定的事件。
layer插件layer.photos()动态插入的图片无法正常显示的更多相关文章
- 关于Latex中插入Visio图片文字不显示的问题
经过探索,将Visio保存为pdf格式是最完美的解决方式,因为pdf文件保存了所有格式和字体信息. Visio输出pdf时要使其符合PDF/A标准.如果包含Visio的多余信息,就会在一些低版本Lat ...
- layer插件学习——弹框(自定义页)
本文是自己整理的关于layer插件的弹框样式结果 介绍: 官方介绍:layer至今仍作为layui的代表作,受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自 ...
- 弹出框layer插件
有时候我们在网页制作中需要引用各种弹出框,弹出框的展现形式多种多样.可以是弹出图片,视频,文字,也可以是弹出图片轮播等形式: 弹出框插件——layer使用方法(其实官方文档中已经介绍的很详细): 下载 ...
- 动态插入图片到 svg 中
动态插入图片到 svg 中使用 createElementNS 来创建svg标签,通过setAttributeNS 来设置属性, 要注意两点,创建的时候要有'http://www.w3.org/200 ...
- 弹出框插件layer使用
layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 插件官方地址:http://layer.layui.co ...
- layer插件学习——提示层
本文是自己整理的关于layer插件的提示层的结果 一.准备工作 下载jQuery插件和layer插件,并引入插件(注意:jQuery插件必须在layer插件之前引用) 百度云资源链接: jQuery插 ...
- layer插件学习——询问框
本文是自己整理的关于layer插件的询问框样式结果 一.准备工作 下载jQuery插件和layer插件,并引入插件(注意:jQuery插件必须在layer插件之前引用) 百度云资源链接: jQuery ...
- layer插件学习——icon样式
本文是自己整理的关于layer插件的icon样式结果 一.准备工作 下载jQuery插件和layer插件,并引入插件(注意:jQuery插件必须在layer插件之前引用) 百度云资源链接: jQuer ...
- 用jQuery Validate+layer插件实现好看的表单提交效果
作为初学者,以前做表单验证都是自己写的,目的是让自己更好的了解代码,加深自己对javascript的理解,但是其实在很久都知道有一个很好用的表单验证插件:jQuery Validate.js,一直都没 ...
随机推荐
- C语言小程序——推箱子(窄字符和宽字符)
C语言小程序——推箱子(窄字符Version) 推箱子.c #include <stdio.h> #include <conio.h> #include <stdlib. ...
- 2017CS231n学习笔记——计算机视觉的概述
本节课主要讲述了cs231n课程的背景和计算机视觉的历史,也主要介绍了目前很重要的一个计算机视觉数据集--IMAGENET. 更多内容参考我的AI学习之路 课程简介 这门课程是由stanford大学计 ...
- Testing - 软件测试的思维和技巧
01 - 测试员不仅仅是执行测试用例,对实际结果和预期结果进行比较 测试员其实是参与了设计和执行测试的各个环节:测试架构,环境搭建,测试用例等等,并确定预期输出. 大多数设计测试都是基于业务流程和原理 ...
- eclipse clean和build作用
由于eclipse的编译是基于时间戳的判断机制的. 因此当你按build all的时候有些eclipse认为时间戳没有改变的类不会被编译. 因此你可以先clean一下再编译.这个时候eclipse ...
- null、undefined、typeof、instanceof
目录 概述 null undefined typeof instanceof 概述 JavaScript(ECMAScript标准)里共有5种基本类型: undefined, null, Boolea ...
- eval() 和 with()
作用域完全由写代码时的函数声明所决定,js有两种机制可以实现”破坏“我们对作用域的常规理解,通过eval()和with(). 1. eval()函数接受字符串为参数,并将其中的声明提升到eval()函 ...
- Jpush极光推送的一些心得
在集成极光推送的时候,test完全正常.部署到服务器后只发送一条推送之后推送不继续发送.经排查: 2018-06-28 10:24:26.394 [ThreadPoolTaskExecutor-4] ...
- 使用 JRebel 进行远程热部署
JRebel支持热部署,和远程热部署,本文我们来搭建一下远程热部署. 一.服务器安装 JRebel 1.官网下载最新的 JRebel 安装包,下载链接:https://zeroturnaround.c ...
- Android多线程编程<一>Android中启动子线程的方法
我们知道在Android中,要更新UI只能在UI主线程去更新,而不允许在子线程直接去操作UI,但是很多时候,很多耗时的工作都交给子线程去实现,当子线程执行完这些耗时的工作后,我们希望去修改 ...
- 一个电脑的重装到java开发环境安装配置的全过程
刚拿到一台别人用过的电脑.看着c盘爆满,而且用了还是windows7操作系统,强迫症发作马上就准备重装系统. 之前换固态使用wepe制作U盘启动盘装系统的步骤和过程全部忘记的,贼尴尬. 同事都看不过眼 ...