如何判断一个div中的img全部加载完毕？

如题，比如：<div>
    <img src="1.jpg" />
    <img src="2.jpg" />
    <img src="3.jpg" />
    <img src="4.jpg" />
</div>我如何知道div下的图片1234全部都加载完毕，jq里有内置方法吗

解决方案 »

  1.   

    这个有意思，这个参考看看...
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
    </head>
    <style type="text/css">
    *{font-family:verdana; font-size:12px;}
    div{border:1px solid red; padding:2px;}
    </style>
    <script type="text/javascript">
    function $(id){
    return "string" == typeof(id) ? document.getElementById(id) : id ;
    }
    var picNum=0;
    function FinishLoad(){
    picNum+=1;
    if(picNum==4) alert("4个图片加载完毕.");
    }
    </script>
    <body>
    <div>
        <img src="1.jpg" onload="javascript:FinishLoad();" />
        <img src="2.jpg" onload="javascript:FinishLoad();" />
        <img src="3.jpg" onload="javascript:FinishLoad();" />
        <img src="4.jpg" onload="javascript:FinishLoad();" />
    </div>
    </body>
    </html>
      

  2.   

    这样好浏览一点<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
    </head>
    <style type="text/css">
    *{font-family:verdana; font-size:12px;}
    div{border:1px solid red; padding:2px;}
    </style>
    <script type="text/javascript">
    function $(id){
    return "string" == typeof(id) ? document.getElementById(id) : id ;
    }
    var picNum=0;
    function FinishLoad(){
    picNum+=1;
    if(picNum==4) alert("4个图片加载完毕.");
    }
    </script>
    <body>
    <div>
        <img src="1.jpg" onload="javascript:FinishLoad();" />
        <img src="2.jpg" onload="javascript:FinishLoad();" />
        <img src="3.jpg" onload="javascript:FinishLoad();" />
        <img src="4.jpg" onload="javascript:FinishLoad();" />
    </div>
    </body>
    </html>
      

  3.   

    一般的话
    <img src='' onload='alert("done");'/>[
    IE有bug，这么写，onload写在前面
    var img = new Image;
    img.onload = function(){
    alert ( img.width );
    };
    img.src = "test.gif";
      

  4.   

    回2楼：
    如果需要在每个img标签里都加上onload事件，会不会有什么速度方面的影响
      

  5.   

    ie：var imgs =div.getElementsByTagName('img');
    for(var i = 0; i<imgs.length;i++){
      imgs[i].onreadystatechange = function(){
          if(!(imgs[i].readyState=="complete"||imgs[i].readyState=="loaded")){ 
                return false;
    }
    }
      

  6.   

    onload函数是一个过程，不一定能成功，还是需要在过程中判断的。
      

  7.   

    function FinishLoad(){
    picNum+=1;
    if(picNum==4) alert("4个图片加载完毕.");
    }运行这个是不会耗时的
      

  8.   

    <script src="jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
            $().ready(function(){
                var $img=$('img');
                var imgCount=$img.length;
                $img.load(function(){
                    imgCount--;
                    if(imgCount==0){
                        alert("All pictures is loaded.");
                    }
                });
            });
        </script>
      

  9.   

    都是在client端运行，对速度的影响应该很小很小,onreadystatechange，readyState 好象是XMLHttpRequest对象的相关内容，对图片是否也有这个这些相关内容呢？？？
      

  10.   

    楼主可以看一下jQuery的相关资料