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更新所有的图片