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的知识!