查看图片插件--Viewer（类似于qq和微信聊天 的查看图片）

Posted 2020-10-03 秦大傻&&马二哈

Viewer的github地址：https://github.com/fengyuanchen/viewer  下载该插件（在文件夹dist里面）

具有参考价值的几个网站：http://www.dowebok.com/demo/192/index3.html      http://www.szbelle.com/article/2890.html      http://www.jq22.com/jquery-info6536

Viewer的使用，参考：http://www.dowebok.com/demo/192/  ，有简单介绍在原生js和jquery中使用，以及回调函数和自定义函数的使用。

• 静态加载图片 查看: 需要引入jqueryJS、viewer的js css 文件，就可使用强大的Viewer

  <div class="meetingCons" id="chatConDivs" style="overflow:auto;">
           <div id="show">
          <span>2222</span>
          <img data-original="./a.png" src="./a.png" >
          </div>
      <div id="show">
          <span>2222</span>
          <img data-original="./b.png" src="./b.png" >
      </div>
      <div id="show">
          <span>2222</span>
          <img data-original="./applySpeak.png" src="./applySpeak.png" >
      </div>
          <p class="message_time con">2017/8/17 下午2:25:38</p>
          <div class="me con">
              <h5 class="name">我@所有人</h5>
              <div id="show"><div>
              <p style="margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; text-indent:0px">
                  <img id="897990180693082112_1502951138405" data-original="./min.png" src="./sss.png">
              </p>
          </div>
      </div>

  JS引用viewer插件

  $(‘.meetingCons‘).viewer(‘data-original‘);//一定需要个容器包含所有的img标签，通过url:data-original将所有的img的图片缓存

• 类似于QQ、微信聊天中会有发送图片，并不是静态加载的图片，这时候需要调用Viewer的方法，需要在js运行时先加载所有的图片，然后在发送图片后或者接收图片后在执行update方法

 

$(‘.meetingCons‘).viewer("data-original");//viewer加载所有的聊天图片
$(‘.meetingCons‘).viewer("update");//viewer更新所有的图片