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


Posted in Javascript onMay 14, 2019

前台页面要求图片的查看,是在表格中点击查看才弹出图片,网上发现用Viewer插件的挺多,就选用的这款插件,但是Viewer插件会产生缩略图,这里取巧了,将缩略图统一替换成了一个带有查看两字的小图片,这样就解决了表格中方缩略图空间不足的问题。

Viewer.js 是一款强大的图片查看器

Viewer.js 特点:

支持移动设备触摸事件
支持响应式
支持放大/缩小
支持旋转(类似微博的图片旋转)
支持水平/垂直翻转
支持图片移动
支持键盘
支持全屏幻灯片模式(可做屏保)
支持缩略图
支持标题显示
支持多种自定义事件

下面看下解决 viewer.js 动态更新图片导致无法预览的问题,具体内容如下所示:

1、viewer.js 使用 Demo

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

2、viewer.js 下载地址

https://github.com/fengyuanchen/viewerjs

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

4、解决方案

参看官方文档:

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

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 动态更新图片导致无法预览的问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jQuery点击tr实现checkbox选中的方法
Mar 19 Javascript
javascript自定义的addClass()方法
May 28 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
浅析javascript操作 cookie对象
Dec 26 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
Aug 13 Javascript
react native 获取地理位置的方法示例
Aug 28 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
Nov 05 Javascript
JS实现网页烟花动画效果
Mar 10 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 #Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 #Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 #Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
May 14 #Javascript
fastadmin中调用js的方法
May 14 #Javascript
vue+elementUI实现表单和图片上传及验证功能示例
May 14 #Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
May 14 #Javascript
You might like
用PHP来写记数器(详细介绍)
2006/10/09 PHP
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
xmlhttp缓存清除的2种解决方法
2013/12/13 Javascript
js闭包的用途详解
2014/11/09 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
2016/03/23 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
微信小程序wxs实现吸顶效果
2020/01/08 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
浅析Python中的多重继承
2015/04/28 Python
Python的净值数据接口调用示例分享
2016/03/15 Python
Python使用redis pool的一种单例实现方式
2016/04/16 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
Pycharm以root权限运行脚本的方法
2019/01/19 Python
Python实现的旋转数组功能算法示例
2019/02/23 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
python SVD压缩图像的实现代码
2019/11/05 Python
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
德国高尔夫商店:Par71.de
2020/11/29 全球购物
优秀大学生推荐信范文
2013/11/28 职场文书
信息技术专业个人自我评价
2013/12/11 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
初中班长竞选稿
2015/11/20 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
Python快速优雅的批量修改Word文档样式
2021/05/20 Python
python自动化测试通过日志3分钟定位bug
2021/11/20 Python