(1)viewerjs 源码,以及官方文档

​​​​​i​​​​​​​​​​​​​https://github.com/fengyuanchen/viewerjs/blob/main/README.mdicon-default.png?t=M85Bhttps://github.com/fengyuanchen/viewerjs/blob/main/README.md  (2)静态图片生成预览不用说了,按官方操作即可。

  (3)如果图片是动态加载的,比如ajax 如何进行操作?

           答:

<!--图片预览组件11版,支持动态创建-->
<link rel="stylesheet" href="/common/css/viewer11.css">
<script type="text/javascript"  src="/common/js/viewer11.js"></script>

      在ajax 获取完毕后,并把图片书写到 dom后执行如下:showPic 为图片列表外部容器。

viewer = new Viewer(document.getElementById(''), {
 toolbar: true,  //显示工具条
 viewed() {
    viewer.zoomTo(0.75);   // 图片显示比例 75%

 },
 show: function () {        // 动态加载图片后,更新实例
    viewer.update();
    $(".viewer-container").css({"z-index": 9999999});
 },
});

(4)如果再同一个页面有多组viewer 视图如何避免多次初始化冲突;viewer定义全局。

var viewer;

xxxx

if (typeof viewer !== "undefined") {
 viewer.destroy();
}
viewer = new Viewer(document.getElementById('showPic'), {
 toolbar: true,  //显示工具条
 viewed() {
    viewer.zoomTo(0.75);   // 图片显示比例 75%

 },
 show: function () {        // 动态加载图片后,更新实例
    viewer.update();
    $(".viewer-container").css({"z-index": 9999999});
 },
});

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐