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

 更新时间:2019年05月14日 14:48:19   作者:Blogs-whx  
Viewer.js 是一款强大的图片查看器,这篇文章主要介绍了解决 viewer.js 动态更新图片导致无法预览的问题 ,需要的朋友可以参考下

前台页面要求图片的查看,是在表格中点击查看才弹出图片,网上发现用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、解决方案

参看官方文档:

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去掉字符串里的所有空格

    如何用javascript去掉字符串里的所有空格

    如何用javascript去掉字符串里的所有空格...
    2007-02-02
  • nodejs分离html文件里面的js和css的方法

    nodejs分离html文件里面的js和css的方法

    这篇文章主要介绍了nodejs分离html文件里面的js和css的方法,本文需要分离出一个html 文件里面的script 和style 里面的内容,然后单独生成js文件和css 文件,感兴趣的可以了解一下
    2019-04-04
  • webpack打包的3种hash值详解

    webpack打包的3种hash值详解

    这篇文章主要为大家介绍了webpack打包的3种hash值详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 如何在JavaScript中实现私有属性的写类方式(二)

    如何在JavaScript中实现私有属性的写类方式(二)

    这篇文章主要介绍了如何在JavaScript中实现私有属性的写类方式。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • JS实现转动随机数抽奖特效代码

    JS实现转动随机数抽奖特效代码

    这篇文章主要为大家详细介绍了一款转动随机数抽奖的JS特效代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-08-08
  • JavaScript实现图形验证码完整代码

    JavaScript实现图形验证码完整代码

    很多小伙伴都在学习JavaScript,可能也会有老师提出这样一个问题,如何用js编写一个简单的验证码,这里就和大家分享一下,这篇文章主要给大家介绍了关于JavaScript实现图形验证码的相关资料,需要的朋友可以参考下
    2024-01-01
  • Javascript实现DIV滚动自动滚动到底部的代码

    Javascript实现DIV滚动自动滚动到底部的代码

    一个比较特殊的客户要求,在一个页面用表格显示数据,数据量不是很多,不希望使用浏览器的滚动条,只能在Div中滚动table中的数据,但是有个特殊的要求,就是必须将滚动条自动滚动到底部
    2012-03-03
  • kindeditor修复会替换script内容的问题

    kindeditor修复会替换script内容的问题

    这里给大家分享的是个人修改的kindeditor的代码,主要是修复了一些BUG,添加了些常用功能,推荐给大家,有需要的小伙伴可以参考下。
    2015-04-04
  • JS中window.open全屏命令解析及使用示例

    JS中window.open全屏命令解析及使用示例

    window.open想必大家对它并不陌生吧,那么如何让它全屏就有些朋友不知道了,下面为大家介绍下其常用的命令及如何全屏
    2013-12-12
  • JS学习笔记之原型链和利用原型实现继承详解

    JS学习笔记之原型链和利用原型实现继承详解

    这篇文章主要介绍了JS学习笔记之原型链和利用原型实现继承,结合实例形式详细分析了javascript原型链以及利用原型实现继承的相关操作技巧与注意事项,需要的朋友可以参考下
    2019-05-05

最新评论