手里有一个网页版即时聊天项目在维护，原来查看图片，是使用打开链接的方式查看，可操作性弱，用户体验比较不舒服。
后来经专业的前端的前端小伙伴推荐，用了vimwer插件，感觉很不搓，但是这其中也遇到了一些比较坑的地方。
最开始，引用的是js版本的viewer。
window.showLargeImage= function(imgDiv){
var viewer = new Viewer(imgDiv, {
url :'data-original',
fullscreen:false,//这里是对于插件中的工具的，可以看文档
toolbar:false
});
}然后在每一张图上，绑定了showLargeImag事件，但由此带来的问题是，第一次查看大图时候，需要点击两次，因为第一次被用来初始化viewer了，测试小姐姐总是抱怨这个问题，我觉得是小问题本来不想改，但在正式bug单面前不得不屈服，于是......坑来了。
最开始我想：我将整个聊天消息框下的所有图片进行一个整的初始化，问题不就解决了么？
var viewer = new Viewer(document.getElementById('msgDiv'), {
url: 'data-original'
});这么做带来了两个问题：
（1）头像也是图片，而点击头像的话，需要进入个人详情页，初始化之后，点击头像就成了进入详情跟大图查看模式同时进行。
（2）聊天新发出的图片，就不能被正常大图显示了，很明显因为这个新来的图片，没有被初始化到viewer中
第一个问题好解决。给头像的父元素，a标签，添加一个事件
$(".headimg").click(function(event) {
return false;
}); 禁止其子元素点击事件。
第二个问题就有点坑了，因为我不是专业前端，后端java一只，所以花了些功夫。在解决问题途中，我将js版的viewer换成了jq版的
function showImg(){
$('#msgDiv').viewer(
{url :'data-original',
fullscreen:false,
toolbar:false,
navbar:false,
keyboard:false
});
}
showImg();这种写法是我比较熟悉的额，定义一个function，然后到处去调用这个，哈哈，在java里面这个思想叫封装对吧。
但是这个依然不能解决第一张图片加入不了初始化的问题。
针对这个，我又扒了扒资料，写了这么段代码
function updateImg(){
$("#msgDiv").viewer('update');
}这是我犯得比较大的傻了，因为如果你的聊天对象第一次发图片的话，因为聊天框里面，并没有图片，所以，updateImg会失败的，这个时候，图片点击无效。
得益于jq选择器的便利，我将每一张图，打上类名 img-msg
$("#msgDiv")换成$(".img-msg") function showImg(){
$('.img-msg').viewer(
{url :'data-original',
fullscreen:false,
toolbar:false,
navbar:false,
title:false,
keyboard:false
});
}showImg();function updateImg(){
$("#msgDiv").viewer('update');
}在需要看大图的地方，调用updateImg,这样可以解决看初次发图片时候，点击无效问题,但最终又产生了一个最后的小问题，那就是最新发送的图片，预览时候没有显示我想要的大图，我的img标签里，src放的是小图地址，data-original 放的是大图地址。求助前端老员工，陪我断点了半天viewer底层代码，最终发现，，，，坑出在updateImg里面有木有啊！！！
这里我写的updateImg完全就是画蛇添足了,我为每个新加入的图片绑定了onload="updateImg()";这里更新的时候，并没有带上data-original值，所以说，viewer根本获取不到大图地址，于是就打开了小图。
最终删掉updateImg方法，在新加入的图片上直接绑定showImg，嗯，问题解决。
额，因为之前技能点都点在java上，js比较薄弱，以上内容，有什么谬误，希望能有大神来指正，谢谢观看。