bug问题:
近期公司查看图片的插件总是bug异常,领导发令更换这个“灯箱效果”,在网上像爬虫一下寻觅了好久,终于找到一个漂亮的插件:强大的jQuery图片查看器插件Viewer.js
感觉技术没啥问题——咨询领导意见——领导反馈ok——开始移植——本地移植成功(开心,小问题不要慌)——移交后端大佬测试:内容页面成功实现灯箱效果,但是我们首页和列表页有个类似知乎当前页加载内容的效果,然后就卡坑了!
事先声明:我用的是jquery版插件,vue版插件同样问题解决方案在底部。
解决之路:
捣鼓半天之后,插件js内:ready,init,build等地方打断点测试,终于找到原因了:动态加载的之前插件都已经遍历过图片了,这...
那就只能在ajax动态加载数据后面再一次:
$('.ppbox').viewer({ url: 'data-original' });
这样就可以了,出现了黑色的弹框,咦,我图片呢?图片没有加载,why?无意中点击“上一张”和“下一张”按钮,窝草,图片又出来了,就是动态加载之后没有出现,.net技术大佬推断是trigger委托事件没有触发,我就陷入了修改trigger之路,改为on和delegate的误区,但是知道离成功越来越近了。
第二天上班,我深入研究了trigger,发现它本身就是一个委托事件,应该不是这个地方的问题,我就怀疑:是不是声明的函数程序看到之后,比较懒,发现有数据,就没有更新?
然后,在本地模拟动态加载:
$(".ppbox .btn").click(function(){ var html = '<img data-original="../../static/pic/tj-ad.png" src="../../static/pic/tj-ad.png">'; $('.ppbox').append(html); aa(); }) function aa(){ $('.ppbox0').viewer({ url: 'data-original' }); }
咦,有效,这次终于出现了,我动态页面第一次$('.ppbox').viewer()和第二次('.ppbox0').viewer()区别就在于class不一样了,js程序就又一次跑了起来,效果就实现了!然后,让大佬动态添加class名字,每次都不一样,终于结束了此次bug之路:Viewer.js不支持动态加载图片,无法出图的问题。
VUE版解决方案:
同样问题在vue版的插件中也存在,解决方案在2017年伤心的桔子嘎就提出了解决方案(https://blog.csdn.net/u014417573/article/details/73739691/),需要再动态加载的时候重新声明一下viewer,并viewer.update()更新一次:
var viewer = new Viewer(document.getElementById('scenePhoto'),{ show: function (){ viewer.update(); } });
bug2:其实算是bug,插件自定义了属性,却没有用
用这个插件还有另外一个问题:他的用法是父级包含所有的图片,然后插件把所有图片遍历到一起,在灯箱出现的时候调用,很显然我的内容中还有头像图片和图标也被遍历了,在图片切换的时候,同样会被加载出来,这不是我想要的结果!!!
那我是怎么改的呢?
解决方案:
在u.prototype原型初始化init的函数中,将“n = s ? e : e.find(E)”修改成了“n = s ? e : e.find('img[data-original]')”,大概意思就是由找所有图标改成了找带有data-original自定义属性的图片;
代码解压之后大概在130行
n = s ? e : e.find('img[data-original]')
这样就限定了,图片只能是带有自定义属性data-original的才会有灯箱效果。
原始插件地址:
https://www.jq22.com/jquery-info6536
https://github.com/fengyuanchen/viewerjs
另外想说的是,写插件的大佬很牛逼,代码写的很高,做了太多混淆编译,修改起来,哎呦我去!都是泪,等于将这个插件学了一遍!不过还是谢谢大佬,从您源码学到好多之前忽略的jquery的知识!