解决 viewer.js 动态更新图片导致无法预览的问题
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 动态更新图片导致无法预览的问题的更多相关文章
- 基于Python实现matplotlib中动态更新图片(交互式绘图)
最近在研究动态障碍物避障算法,在Python语言进行算法仿真时需要实时显示障碍物和运动物的当前位置和轨迹,利用Anaconda的Python打包集合,在Spyder中使用Python3.5语言和mat ...
- Viewer.js插件浏览图片
https://www.jianshu.com/p/e3350aa1b0d0 Viewer.js插件浏览图片 Viewer.js插件浏览图片 Viewer.js插件浏览图片
- js实现图片上传预览及进度条
原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...
- 兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...
- js矩阵菜单或3D立体预览图片效果
js矩阵菜单或3D立体预览图片效果 下载地址: http://files.cnblogs.com/elves/js%E7%9F%A9%E9%98%B5%E8%8F%9C%E5%8D%95%E6%88% ...
- [前端 4] 使用Js实现图片上传预览
导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...
- js前端实现多图图片上传预览
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- js:s上次预览,上传图片预览,图片上传预览
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 移动端 js 实现图片上传 预览
方法一: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q ...
随机推荐
- 遇到的一些vue的问题
一.事件绑定中的事件处理方法后加不加括号问题 1.例如: click事件后加不加括号 a.@click = "getContent" b.@click = "getCon ...
- OAuthLogin2.0
开源第三方登录组件OAuthLogin2.0 支持QQ,阿里巴巴,淘宝,京东,蘑菇街,有赞等平台 Nuget地址:https://www.nuget.org/packages/OAuthLogin ...
- 关于float和double类型能表示的数据范围和精度分析
来自教材<计算机组成原理>p16 float:6--7位 double:15--16位 意思就是double类型的数据,你确实能表达出很大的数字,但是其只有15位是精确的. 1.计算机中, ...
- iOS使用TestFlight进行内部和外部人员测试
前言 在iOS 8中,苹果发布了一个叫做TestFlight的新玩意,用于将Beta测试流水化.此前你可能听说过这个东西,因为TestFlight作为一个独立的测试平台已经有些年头了.被苹果收购之后用 ...
- JAVA基础之基本类型包装类、System类、Math类、Arrays类及大数据运算
个人理解: 为了方便运算及调用一些方法,我们需要将基本类型的数值转换为对象:不过转换的时候需要特别注意好它们的类型到底是什么,需要调用方法的类名是哪个!特别注意是Byte常量池的相关问题(==):gc ...
- 【转】说说Runnable与Callable
说说Runnable与Callable Callable接口: Runnable接口: 相同点: 两者都是接口:(废话) 两者都可用来编写多线程程序: 两者都需要调用Thread.start( ...
- canvas、svg、canvas与svg的区别
一.canvas canvas 画布,位图 <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形 注意:不要在style中给canvas设置宽高,会有位移差 can ...
- ubuntu 12.04 source.list 源更新
官方源: #deb cdrom:[Ubuntu 12.04 LTS _Precise Pangolin_ - Release i386 (20120423)]/ precise main restri ...
- azure powershell 获取可用镜像列表
通过Azure Powershell 指定location和Pbulishername 获取所有可用镜像的 publisherName,Offer,Skus,Version,location信息列表 ...
- 【Python图像特征的音乐序列生成】生成伴奏旋律(附部分代码)
做了半天做的都是一些细枝末节的东西,嗨呀. 伴奏旋律是Ukulele和弦,MIDI发音乐器是Guitar.在弹唱的时候,Ukulele和弦就是伴奏. 我们以创建<成都>伴奏为例: 节奏型: ...