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,一直都没 ...
随机推荐
- tomcat虚拟目录配置
Tomcat6.0虚拟目录配置[转] 设虚拟目录 "site",通过 http://localhost:8080/site 访问物理路径 D:"site 文件夹里面的内容 ...
- 机器学习技法笔记:09 Decision Tree
Roadmap Decision Tree Hypothesis Decision Tree Algorithm Decision Tree Heuristics in C&RT Decisi ...
- Python九九乘法表三种方案
方法一: row = 1 # 定义起始行 while row <= 9: # 最大打印 9 行 col = 1 # 定义起始列 while col <= row: # 最大打印 row 列 ...
- Hybrid App 原理解析
目录 一.现有混合方案 二.Hybrid技术原理 三.Native 通知 H5 (Native 调用 JS) 3.1 Android 调 H5 3.2 iOS 调 H5 四.H5 通知 Native( ...
- 课程四(Convolutional Neural Networks),第二 周(Deep convolutional models: case studies) —— 1.Practice questions
[解释] 应该是same padding 而不是 valid padding . [解释] 卷积操作用的应该是adding additional layers to the network ,而是应该 ...
- 我是如何利用Github Pages搭建起我的博客,细数一路的坑
1.前言 其实早在这之前我就一直想过写博客,但由于种种原因一直没有去学习这方面的知识,最近半个月(从开始动手到搭建好)一直陆陆续续的在着手这方面的工作.从开始到搭建完成的过程中遇到了很多困难,因为在这 ...
- Linux编程 8 (挂载mount,查看磁盘df du,搜索grep,压缩zgip,归档tar)
一. 挂载存储媒体 linux文件系统将所有的磁盘都并入一个虚拟目录下,当使用新的存储媒体之前,需要把它放到虚拟目录下,这项工作称为挂载(mounting) 1.1 mount 命令 在linux上用 ...
- [疑难杂症]__点击win10屏幕最上方的边界会莫名其妙打开Internet Explorer浏览器,不胜其烦(2次ps:已解决!!!).
关于问题描述: 每次误点到屏幕上边界会莫名打卡Internet Explorer浏览器(一开始开以为是自带的Edge浏览器,后来在查找相关解决方法的时候才发现并不是同一款浏览器) 这个问题存在好久了, ...
- JAVA基础 <一>
java基础的学习要领,多写多写. 学习方法很简单,了解 到 理解 到 熟悉 到 精通 先讲变量吧: public static void main(String[] args) { int ...
- Spring Boot + Spring Cloud 实现权限管理系统 后端篇(二十二):链路追踪(Sleuth、Zipkin)
在线演示 演示地址:http://139.196.87.48:9002/kitty 用户名:admin 密码:admin 技术背景 在微服务架构中,随着业务发展,系统拆分导致系统调用链路愈发复杂,一个 ...