Question

viewer.js动态生成的img 显示不了

通过后台吧数据传到前段，在点击图片放大的时候 放大的图片出不来 图片是通过js动态生成的

Answer 1

首先讲下这个bug的出现的情况，页面中有<a href="JavaScript:void(0)" onclick="document.getElementById('current').src=
‘images/001.jpg’;“>这么一个a标签，onclick中的JS代码就是改变id为current的img标签的src属性，以达到动态切换图片的效
果。可是不幸的是：IE是动态改变的图片的路径，但是图片却不显示出来，得右键“显示图片”才能看到改变后的图片，不知是什
么原因，但据说是<a href="javascript:void(0)">或者<a href="#">这样使用a标签的话并不能阻止a标签最后触发一个什么行为，
导致ie6会错误的认为页面刷新或者重定向了，并且中断了当前所有连接，这样新图片的加载就被aborted了（不知真假），不管原
因是真是假，下面就先说下解决方案吧
简单的解决方法：
1、<a href="javascript:void(0)" onclick="document.getElementById('current').src=‘images/001.jpg’; return false;“
>；就是在代码后面加上return false;即可
2、把A换成SPAN等

问题代码

1 function getNewCaptcha(obj, ct){
2 var oImg = obj.getElementsByTagName('img')[0];
3 var capId = obj.getElementsByTagName('input')[0].value;
4 if(!capId){
5 capId = genCapId(obj, ct);
6 }
7 if(capId){
8 oImg.src = '/captcha?c=' + capId + '&r=' + Math.random();
9 oImg.style.display = 'block';
10 oImg.onerror = function(){
11 imgError(oImg);
12 }
13 obj.onclick = function(){
14 getNewCaptcha(obj);
15 return false;
16 }
17 }else{
18 imgError(oImg);
19 }
20 }

15行为新加的return false，加上以后IE6就OK了

Answer 2

动态加载图片后，更新viewer.js图片查看插件的实例，参考代码如下：

window.addEventListener('DOMContentLoaded', function () {
 var galley = document.getElementById('singleBox');
 var viewer = new Viewer(galley, {
  //url: 'data-original',
  title: function (image) {
   return image.alt + ' (' + (this.index + 1) + '/' + this.length + ')';
  },
  show: function (){  // 动态加载图片后，更新实例
   viewer.update();
  }
 });
});

加上上述代码中加了注释的那段参数。

Answer 3

要再绑定一次函数,每次运行绑定函数,都会找到对应元素来绑定事件,

Answer 4

在ajax生成图片后调用：
var viewer = new Viewer(document.getElementById('galley2'),{
url: 'data-original',
show: function (){
viewer.update();
}
});
galley2 为包含图片的父元素id，
data-original为预览大图的路径属性值，