解決 viewer.js 動態更新圖片導致無法預覽的問題
阿新 • • 發佈:2019-05-14
col 動態 targe 工具條 bubuko UNC 方案 length inf
1、viewer.js 使用 Demo
http://fengyuanchen.github.io/viewerjs/
2、viewer.js 下載地址
https://github.com/fengyuanchen/viewerjs
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, //顯示工具條 12viewed() { 13 viewer.zoomTo(0.75); // 圖片顯示比例 75% 14 }, 15 show: function (){ // 動態加載圖片後,更新實例 16 viewer.update(); 17 }, 18 }); 19 });
解決 viewer.js 動態更新圖片導致無法預覽的問題