1、viewer.js 使用 Demo

http://fengyuanchen.github.io/viewerjs/

2、viewer.js 下载地址

https://github.com/fengyuanchen/viewerjs

3、viewer只能初始化一次,也就是说如果用ajax添加了新的图片,你再初始化新添加的图片还是出不来,只有第一次初始化加载的图片

4、解决方案

参看官方文档:

5、具体代码实例

 $.post('your_url', {
param: 'value'
}, function(data) {
var html = '';
for (var i = data.length - 1; i >= 0; i--) {
html += '<li><img src="img_source" ></li>'
}
$("#img_list").append(html);
// 初始化 viewer.js
var viewer = new Viewer(document.getElementById('img_list'), {
toolbar: true, //显示工具条
viewed() {
viewer.zoomTo(0.75); // 图片显示比例 75%
},
show: function (){ // 动态加载图片后,更新实例
viewer.update();
},
});
});

解决 viewer.js 动态更新图片导致无法预览的问题的更多相关文章

  1. 基于Python实现matplotlib中动态更新图片(交互式绘图)

    最近在研究动态障碍物避障算法,在Python语言进行算法仿真时需要实时显示障碍物和运动物的当前位置和轨迹,利用Anaconda的Python打包集合,在Spyder中使用Python3.5语言和mat ...

  2. Viewer.js插件浏览图片

    https://www.jianshu.com/p/e3350aa1b0d0 Viewer.js插件浏览图片 Viewer.js插件浏览图片 Viewer.js插件浏览图片

  3. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  4. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  5. js矩阵菜单或3D立体预览图片效果

    js矩阵菜单或3D立体预览图片效果 下载地址: http://files.cnblogs.com/elves/js%E7%9F%A9%E9%98%B5%E8%8F%9C%E5%8D%95%E6%88% ...

  6. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  7. js前端实现多图图片上传预览

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  8. js:s上次预览,上传图片预览,图片上传预览

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 移动端 js 实现图片上传 预览

    方法一: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q ...

随机推荐

  1. Jenkins权威指南

    https://jenkins.io/doc/   ---官网 https://www.cnblogs.com/leefreeman/p/4226978.html

  2. 求一个极大数的欧拉函数 phi(i)

    思路: 因为当n>=1e10的时候,线性筛就不好使啦.所以要用一个公式 φ(x)=x(1-1/p1)(1-1/p2)(1-1/p3)(1-1/p4)…..(1-1/pn) 证明详见:<公式 ...

  3. iOS Runtime常用方法整理

    关于runtime的学习网上有很多博客,在学习之前也查过很多资料,觉得南峰子老师博客中对 runtime 的讲解挺详细的,博客地址:http://southpeak.github.io/categor ...

  4. css3相关样式

    1.渐变 1.1 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向 background: linear-gradient(direction, color-stop1 ...

  5. form表单转换为Json字符串数据

    https://github.com/marioizquierdo/jquery.serializeJSON 效果图 加载使用 <script type="text/javascrip ...

  6. 如何正确配置 Nginx + PHP ???

    本文转自如何正确配置 Nginx + PHP,如有侵权,请联系管理员及时删除!

  7. javaSe-常用的类之Calender

    Calendar是java中常用的类,比data类使用更加方便,更能更加强大,好吧多的不用你说了,直接上代码 import java.util.Calendar;//需要引进的包 public cla ...

  8. HDU 5500 Reorder the Books (水题)

    题意: 有n本书,编号为1~n,现在书的顺序乱了,要求恢复成有序的样子,每次只能抽出其中一本并插到最前面,问最少需要多少抽几次? 思路: 如果pos[i]放的不是书i的话,则书i的右边所有的书都必须抽 ...

  9. 【Python图像特征的音乐序列生成】思路的转变

    关于生成网络这边,可能会做一个深度的受限玻尔兹曼机,这样可以保证生成的音乐不会太相似. 情绪识别网络和生成网络的耦合,中间变量可能直接就是一个one-hot向量,用来标注指定的情绪,不做成坐标那种难以 ...

  10. SAP云平台的Document Service

    SAP云平台以微服务的方式提供了Document的CRUD(增删改查)操作.该微服务基于标准的CMIS协议(Content Management Interoperability Service). ...