解决 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 ...
随机推荐
- Python模块之 sys
# sys模块是与python解释器交互的一个接口 import sys print(sys.argv) # 命令行参数list,第一个元素是程序本身路径 # (第一个元素就是执行文件的时候,写在py ...
- 2019湘潭校赛 E(答案区间维护)
题目传送 思路是始终维护西瓜数量的区间,即L代表目前可以达到的最少的,R是最多的,然后判断一下. #include <bits/stdc++.h> using namespace std; ...
- Hadoop体系结构
在前面的博文中,我已经介绍过Hadoop的基本概念了(见博文初识Hadoop),今天来介绍一下Hadoop的体系结构. Hadoop的两大核心是HDFS和MapReduce,而整个Hadoop的体系结 ...
- SpriingMVC执行流程结构
SpringMVC也叫spring web mvc,属于表现层的框架,是Spring框架的一部分. Spring MVC请求流程图: request-------->DispatcherSer ...
- 4.词法结构-JavaScript权威指南笔记
今天是第二章.所谓词法结构(lexical structure),就是写代码中最基本的东西,变量命名,注释,语句分隔等,这是抄书抄的... 1.字符集,必须是Unicode,反正Unicode是ASC ...
- ajax取到数据后如何拿到data.data中的属性值
今天遇到的ajax取到数据后如何拿到data.data中的属性值的问题 比如拿到了数据 我要取出data中的name 题外话:当然取名最好别取什么奇怪的xiaobi
- 去除inline-block间隙的几种方法
为什么会产生间隙? 由于编写代码时的美观和可读性,在代码中添加回车或空格而产生的间隙. html代码: <ul class="container"> <li> ...
- SQL数据库基础二
- JMeter进行压力测试
一.jmeter的安装 1.从 http://jmeter.apache.org/download_jmeter.cgi 下载jmeter(图1正中间的apache-jmeter-2.13.tg ...
- 通过Jenkins调用自动部署war包及jar包到服务器上的Shell脚本
1)部署war包#!/bin/bashif [ id>0];then echo"stopproject" kill −9 idelse echo "project ...