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. Ubuntu14.04 使用scp远程传输命令进行服务器文件互传

    1.将另一个服务器上的文件拷贝到本地 sudo scp host_name@host_ip:/home/aaa/bbb /ccc/ddd/bbb 上面命令的意思是将远程服务器/home/aaa/目录下 ...

  2. java程序员应该知道的20个有用的库

    https://blog.csdn.net/weixin_43923408/article/details/87885668

  3. docker部署mysql远程连接 解决1251 client does not support ..

    现象:用虚拟机上Docker启动mysql之后无法在本地安装的navicat上远程连接已启动的mysql,错误截图: 原因:mysql 8.0 默认使用 caching_sha2_password 身 ...

  4. Spring Bean的一生

    Spring Bean的一生 When you work directly in Java, you can do anything you like with your objects and do ...

  5. hadoop完全分布式模式搭建和hive安装

    简介 Hadoop是用来处理大数据集合的分布式存储计算基础架构.可以使用一种简单的编程模式,通过多台计算机构成的集群,分布式处理大数据集.hadoop作为底层,其生态环境很丰富. hadoop基础包括 ...

  6. [make error ]ubuntu显示不全

    make时候,输出到文件里 make >&makelog 就会自动出现一个makelog 会慢一些,不要急.

  7. linux机器上部署多台Tomcat

    在Linux机器上部署多台Tomcat, 我部署的是Tomcat8,只需要一步,即避免端口号冲突. 在解压后的tomcat目录下,修改conf下server.xml. 修改shutdown端口: &l ...

  8. 51nod 1572 宝岛地图

    题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题 勇敢的水手们到达了一个小岛,在这个小岛上,曾经有海盗在这里埋下了一些宝藏.然而,我 ...

  9. 《大规模 web服务开发》笔记

    大规模服务:     可扩展,负载均衡,保证冗余,低运维成本,开发人数和开发方法的变化 数据处理:     磁盘—>内存—>缓存—>CPU 障碍:     持续增长的服务,”无法在内 ...

  10. CMDB API验证

    CMDB API验证 为什么做API验证 API验证是防止数据在传输的过程中,保证数据不被篡改 如何设计的API验证 灵感来源于Torando中加密Cookie的源码,主要是生成加密的随机字符串. M ...