解决 viewer.js 动态更新图片导致无法预览的问题
程序员文章站
2022-04-15 15:58:56
1、viewer.js 使用 Demo http://fengyuanchen.github.io/viewerjs/ 2、viewer.js 下载地址 https://github.com/fengyuanchen/viewerjs 3、viewer只能初始化一次,也就是说如果用ajax添加了新的 ......
1、viewer.js 使用 demo
2、viewer.js 下载地址
3、viewer只能初始化一次,也就是说如果用ajax添加了新的图片,你再初始化新添加的图片还是出不来,只有第一次初始化加载的图片
4、解决方案
参看官方文档:
5、具体代码实例
1 $.post('your_url', { 2 param: 'value' 3 }, function(data) { 4 var html = ''; 5 for (var i = data.length - 1; i >= 0; i--) { 6 html += '<li><img src="img_source" ></li>' 7 } 8 $("#img_list").append(html); 9 // 初始化 viewer.js 10 var viewer = new viewer(document.getelementbyid('img_list'), { 11 toolbar: true, //显示工具条 12 viewed() { 13 viewer.zoomto(0.75); // 图片显示比例 75% 14 }, 15 show: function (){ // 动态加载图片后,更新实例 16 viewer.update(); 17 }, 18 }); 19 });
上一篇: Vue+elementui 实现复杂表头和动态增加列的二维表格
下一篇: vue学习总结