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">[email protected]</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更新所有的圖片

查看圖片插件--Viewer（類似於qq和微信聊天 的查看圖片）