javascript圖像查看插件viewer.js動態加載圖像列表

viewer.js官網：https://fengyuanchen.github.io/viewerjs/

官網上有一個例子是動態加載單個圖像的：https://fengyuanchen.github.io/viewerjs/examples/dynamic-viewer.html

為了加載圖像列表，需要把Viewer初始化函數的第一個參數image替換為一個Element，這個Element需要包含圖像列表。

假設圖像列表：var imagePathList = ["/path/image-1.jpg", "/path/image-2.jpg"];

我們使用JavaScript原生方法來生成Element,這里使用ul作為Element：

1.創建ul對象

var ulEle = document.createElement("ul");

2.創建li對象列表，添加image對象

for(var i=0;i<imagePathList.length;i++)

{

　　var liEle = document.createElement("li");

　　var img = new Image();

　　img.src = imagePathList[i];

　　liEle.appendChild(img);

　　ulEle.appendChild(liEle);

}

動態加載圖像列表的好處就是不用事先把圖像顯示在頁面上，使用某個事件直接觸發Viewer動態加載顯示圖像列表。