viewer看图插件在PC端网页版即时聊天中的应用

    手里有一个网页版即时聊天项目在维护，原来查看图片，是使用打开链接的方式查看，可操作性弱，用户体验比较不舒服。

后来经专业的前端的前端小伙伴推荐，用了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完全就是画蛇添足了,我为每个新加入的图片绑定了οnlοad="updateImg()";这里更新的时候，并没有带上data-original值，所以说，viewer根本获取不到大图地址，于是就打开了小图。

最终删掉updateImg方法，在新加入的图片上直接绑定showImg，嗯，问题解决。

额，因为之前技能点都点在java上，js比较薄弱，以上内容，有什么谬误，希望能有大神来指正，谢谢观看。