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. 在线获取键盘按键值(ascii码)工具

    在线获取键盘按键值(ascii码)工具 http://www.bejson.com/othertools/keycodes/ 可以根据输入的值获取对应的键盘ascii码值

  2. [软件工程基础]Alpha 阶段事后分析

    设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 帮助选修物理实验的学生撰写实验报告,计算实验数据,验证计算结果,并提供一个讨论的平台. 全体成员认 ...

  3. Spring boot中应用jpa jpa用法

    https://blog.csdn.net/u012582402/article/details/78717705

  4. ES5数组遍历

    reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值. array.reduce(function(total, currentValue, curren ...

  5. java的三大特性之一封装概述

    属性: 属性static属性//静态成员变量/类变量 属性 //实例变量 普通成员变量 类变量,类方法 类变量是所有对象共享的变量,任何一个该类的对象去访问它时,取到的都是同一个值,同样任何一个变量去 ...

  6. mongodb关联查询 和spring data mongodb

    GITHUB:https://github.com/peterowang/Springdata-mongo 使用DBRefs DBRefs中有三个字段 - $ref - 此字段指定引用文档的集合 $i ...

  7. Redis、Memcache区别

    Redis.Memcache区别 redis单核 memcahce多核 redis支持数据持久化 redis支持的数据类型比较多 memcache 只有key->value类型 key-> ...

  8. JAVA加密解密DES对称加密算法

    下面用DES对称加密算法(设定一个密钥,然后对所有的数据进行加密)来简单举个例子. 首先,生成一个密钥KEY. 我把它保存到key.txt中.这个文件就象是一把钥匙.谁拥有它,谁就能解开我们的类文件. ...

  9. python3操作mysql数据库表01(封装查询单条、多条数据)

    #!/usr/bin/env python# -*- coding:UTF-8 -*- import pymysql# import os'''封装查询单条.多条数据'''# os.environ[' ...

  10. 通过Jenkins调用自动部署war包及jar包到服务器上的Shell脚本

    1)部署war包#!/bin/bashif [ id>0];then echo"stopproject" kill −9 idelse echo "project ...