ajax动态提取的图片，jquery如何判断图片加载完成

Question

   我用ajax动态查询出图片，想图片加载完成后显示出来，如何实现，这是我的代码。  
$.ajax({  
type:"POST", 
url:app+"/querySiteArticleImageAJAX.do?pk="+pk,
success: function(data){
if (data != ""){
$("#article-image").html("<tr><td><img src=../css/loading.gif /></td></tr>");
var imageArr = data.split("|");
// 小于3张图片直接显示
if (imageArr.length <= 3){
var concent = "";
for (var i = 0; i < imageArr.length; i++){
var img = new Image();
img.src = "../../"+imageArr[i];
    if($.browser.msie){
        img.onreadystatechange = function(){
            if(img.readystate == "complete" || img.readystate == "loaded"){
             concent += "<tr><td><img src=../../"+imageArr[i]+" /></td></tr>";
            }
        }
    }else if($.browser.mozilla){
        img.onload = function(){
            if(img.complete == true){
             concent += "<tr><td><img src=../../"+imageArr[i]+" /></td></tr>";
            }
        }
    }
} $("#article-image").html(concent);

}else{

}
}
}
});
  

Answer 1

我觉得你的思路有问题，应该是$("#article-image")把图片放进去后，先把图片对象隐藏，然后等图片状态加载完成再显示图片。
$.ajax({  
        type:"POST", 
        url:app+"/querySiteArticleImageAJAX.do?pk="+pk,
        success: function(data){
            if (data != ""){
                $("#article-image").html("<tr><td><img src=../css/loading.gif /></td></tr>");
                var imageArr = data.split("|");
                // 小于3张图片直接显示
                if (imageArr.length <= 3){
                    var concent = "";
                    for (var i = 0; i < imageArr.length; i++){
                        var img = $("<img/>")
                        img.attr("src","../../"+imageArr[i]);
img.hide();
img.load(function(e){$(this).show();})
$("#article-image").append("<tr><td></td></tr>");$("#article-image tr:last>td").append(img);                        }
                 }                                        
                }else{
                    
                }
            }
        }
    });
  

Answer 2

噢。我看明白了。。
你$("#article-image").html(concent);应该放到onreadystatechange 或onload里面。。你这样concent的值一直为空

Answer 3

楼主var concent = "";
                    for (var i = 0; i < imageArr.length; i++){
                        var img = new Image();
                        img.src = "../../"+imageArr[i];
                        if($.browser.msie){
                            img.onreadystatechange = function(){
                                if(img.readystate == "complete" || img.readystate == "loaded"){
                                    concent += "<tr><td><img src=../../"+imageArr[i]+" /></td></tr>";
                                }
                            }
                        }else if($.browser.mozilla){
                            img.onload = function(){
                                if(img.complete == true){
                                    concent += "<tr><td><img src=../../"+imageArr[i]+" /></td></tr>";
                                }
                            }
                        }
                    }                    $("#article-image").html(concent);改成var concent = "",
    el = $("#article-image");
     for (var i = 0; i < imageArr.length; i++){      
         var img = new Image();
         img.src = imageArr[i];
         if($.browser.msie){
             img.onreadystatechange = function(imgSrc){
              return function(){
              if(img.readystate == "complete" || img.readystate == "loaded"){
                 el.append("<tr><td><img src=../../"+imgSrc+" /></td></tr>");
              }
              }              
          }(imageArr[i]);
         }else if($.browser.mozilla){
             img.onload = function(imgSrc){
              return function(){
              if(img.complete == true){                 
                                     el.append("<tr><td><img src="+imgSrc+" /></td></tr>");
                 }
              }
                
             }(imageArr[i])              
         }
    }

Answer 4

看了楼主的代码好像是取得图片路径，然后插入到html，可以在<img onload="xxx()" src="……"/>，这样在图片加载完成后就可以调用回调函数。

Answer 5

liangws你好，看了你的代码觉得是可行的，请问你一个问题：if($.browser.msie){
  img.onreadystatechange = function(imgSrc){
    return function(){
                         if(img.readystate == "complete" || img.readystate == "loaded"){
                            el.append("<tr><td><img src=../../"+imgSrc+" /></td></tr>");
                         }
                     }                     
                 }(imageArr[i]);
   }
你后面写的这个(imageArr[i])这个是什么意思，，没有看懂，，能否指点一下。

Answer 6

zhoufeng0401兄弟的这个方法是可行的。测试过。谢谢。

Answer 7

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
试试区别
1.
var els = document.getElementsByTagName("li");
for (var i = 0, j = els.length; i < j; i++){
    els[i].onclick = function(){
          alert(i)
    }
}
2,
var els = document.getElementsByTagName("li");
for (var i = 0, j = els.length; i < j; i++){
    els[i].onclick = function(i){
          return function(){
               alert(i)
          }
    }(i)
}

Answer 8

你之前的写法，imageArr[i]永远都是最后一个

Answer 9

以下是我其他帖子的解释简单陈述一下,看下面例子var els = document.getElementsByName("text");for (var i = 0, j = els.length; i < j; i++){
  els.onclick = function(){
  alert(i);
  }
}这样做，每次alert出来的都只是i最后的值，这是因为js并没有java那种"块状作用域"
块状作用域简单举例就是，如
java:
for(int i = 0; i < 10; i++){
   
}
System.out.plant(i);//在这里面是访问不到i的而在js里面
for(var i = 0; i < 10; i++){
  //scope
}
alert(i);//这里访问到得是i最后的值，这是因为这个例子与以下例子是等价的var i = 0
for(; i < 10; i++){
   
}
alert(i);在for循环声明i与在外面声明都是一样的，因此当我们触发onclick事件的时候，获取到得值是循环完毕后的i

Answer 10

             img.onreadystatechange = function(imgSrc){return function(){
             alert(imgSrc);
                   if(img.readystate == "complete" || img.readystate == "loaded"){
                    $("#article-image").append("<tr><td><img src=../../"+imgSrc+" /></td></tr>");
                   }
                 }}(imageArr[i]);其中function(imgSrc)
这个函数的参数怎么传值，

Answer 11

你是用jquery的话就简单了，。直接var concent = "";
                    for (var i = 0; i < imageArr.length; i++){
                        var img = new Image();
                        img.src = "../../"+imageArr[i];
                        if($.browser.msie){
                            img.onreadystatechange = function(){
                                if(img.readystate == "complete" || img.readystate == "loaded"){
                                    concent += "<tr><td><img src=../../"+imageArr[i]+" /></td></tr>";
                                }
                            }
                        }else if($.browser.mozilla){
                            img.onload = function(){
                                if(img.complete == true){
                                    concent += "<tr><td><img src=../../"+imageArr[i]+" /></td></tr>";
                                }
                            }
                        }
                    }                    $("#article-image").html(concent);改成var el = $("#article-image");
$.each(imageArr, function(i, path){
var img = new Image();
img.src = path;
$(img).load(function(){
el.append("<tr><td><img src=../../"+path+" /></td></tr>")
})
})