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动态加载显示图像列表。