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,一直都没 ...
随机推荐
- JavaScript实现LUHN算法验证银行卡号有效性
一般验证银行卡有效性用到一种叫做LUHN的算法,简介请参考这篇博客:基于Luhn算法的银行卡卡号的格式校验 注意: 1.LUHN算法只是能校验卡号是否有效,并不能校验卡号和用户名是否一致. 2.如果有 ...
- 谈谈我们对userAgent的看法,为什么爬虫中需要userAgent?
首先打开浏览器,按 F12 进入控制台(Console),然后输入:navigator.userAgent,即可看到 UA.例如: 1 2 Mozilla/5.0 (Windows NT 10.0; ...
- Redis 分布式锁进化史(解读 + 缺陷分析)
Redis分布式锁进化史 近两年来微服务变得越来越热门,越来越多的应用部署在分布式环境中,在分布式环境中,数据一致性是一直以来需要关注并且去解决的问题,分布式锁也就成为了一种广泛使用的技术,常用的分布 ...
- 分布式作业 Elastic-Job 快速上手指南,从理论到实战一文搞定!
Elastic-Job支持 JAVA API 和 Spring 配置两种方式配置任务,这里我们使用 JAVA API 的形式来创建一个简单的任务入门,现在都是 Spring Boot 时代了,所以不建 ...
- laravel5实现第三方登录(微信)
背景 最近手头一个项目需要实现用户在网站的第三方登录(微信和微博),后端框架laravel5.4. 实现过程以微信网页版第三方登录,其他于此类似,在此不做重复. 准备工作 网站应用微信登录是基于OAu ...
- Ubuntu18.04 安装 VMwareTools
VMwareTools作用: 1.增强虚拟显卡和硬盘性能.以及同步虚拟机与主机时钟的驱动程序. 2.可以从物理主机直接往虚拟机里面拖文件. 3.鼠标进入虚拟机后可以直接出来,无需按CTRL+ALT才可 ...
- 四:理解Page类的运行机制(例:基于PageStatePersister的页面状态存取)
有人说类似gridview datalist这样的控件最好不要用在高并发,IO大的网站中企业应用中为了快速开发到可以用一用因为这是一类"沉重"的组件我们姑且不谈这种看法的正确性(我 ...
- salesforce lightning零基础学习(八) Aura Js 浅谈一: Component篇
我们在开发lightning的时候,常常会在controller.js中写 component.get('v.label'), component.set('v.label','xxValue'); ...
- U盘上安装Ubuntu系统 便捷式系统 - 赖大大
简单介绍: U盘可以作为电脑的磁盘使用,在U盘上安装Ubuntu系统,只要有电脑,就可以轻松打开自己的系统, 方便又快捷,非常适合出差工作,学习使用. 另外,插入U盘后,需要我们就入电脑的Blos模式 ...
- MongoDB-Oplog详解
MongoDB Oplog 详解 Oplog 概念 Oplog 是用于存储 MongoDB 数据库所有数据的操作记录的(实际只记录增删改和一些系统命令操作,查是不会记录的),有点类似于 mysql 的 ...