解决 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 相关文章推荐
window.open的功能全解析
Oct 10 Javascript
js计算页面刷新的次数
Jul 20 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
Oct 10 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
关于Javascript加载执行优化的研究报告
Dec 16 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
js代码验证手机号码和电话号码是否合法
Jul 30 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
vue项目配置同一局域网可使用ip访问的操作
Oct 23 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
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
php实现cookie加密的方法
2015/03/10 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
文本加密解密
2006/06/23 Javascript
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
基于jquery的实现简单的表格中增加或删除下一行
2010/08/01 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
JavaScript实用技巧(一)
2010/08/16 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
2017/11/27 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
vue项目中微信登录的实现操作
2020/09/08 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
[42:32]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第二局
2016/02/27 DOTA
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
python web基础之加载静态文件实例
2018/03/20 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
如何使用python进行pdf文件分割
2019/11/11 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
keras topN显示,自编写代码案例
2020/07/03 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
公立医院改革实施方案
2014/03/14 职场文书
低碳环保口号
2014/06/12 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书