1. 程式人生 > >解決 viewer.js 動態更新圖片導致無法預覽的問題

解決 viewer.js 動態更新圖片導致無法預覽的問題

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, //顯示工具條 12
viewed() { 13 viewer.zoomTo(0.75); // 圖片顯示比例 75% 14 }, 15 show: function (){ // 動態加載圖片後,更新實例 16 viewer.update(); 17 }, 18 }); 19 });

解決 viewer.js 動態更新圖片導致無法預覽的問題