怎么判断AJAX取回来的DOM树数据中的图片等信息已经全部加载完成

怎么判断AJAX取回来的DOM树数据中的图片等信息已经全部加载完成，因为现在有个需求要在插入DOM树后取得该对象的scrollHeight高度值，如果里面的图片还没有加载完成就取则不能得到准确的值。求高手帮忙解答，跪谢！！！

解决方案 »

  1.   

    有个变通的办法实现
    var imgList = $(yourDom).find('img');var callback = function(){
      alert('全部图片下载完毕!');
    };var check = (funciton(count, fn){
      return function(){
        count--;
        if(count == 0){
           fn();
        }
      };
    })(imgList.length, onLoad);imgList.each(function(){
      $(this).bind('load', check)
             .attr(src, $(this).attr('src'));
    });
      

  2.   

    var imgList = $(yourDom).find('img');var callback = function(){
      alert('全部图片下载完毕!');
    };var check = (funciton(count, fn){
      return function(){
        count--;
        if(count == 0){
           fn();
        }
      };
    })(imgList.length, callback);imgList.each(function(){
      $(this).bind('load', check)
             .attr(src, $(this).attr('src'));
    });
      

  3.   

    修正楼上的一些BUG！拼写错误和字符漏写等，并补充一下代码顺序和结构！此方法可行！鉴定OVER!
    <html>
    <head>
    <script src="jq.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
    var imgList = $('#ccc').find('img');
    //alert(imgList.length);
    var callback = function(){
      alert('全部图片下载完毕!');
    };var check = (function (count, fn){
      return function(){
        count--;
        if(count == 0){
           fn();
        }
      };
    })(imgList.length, callback);imgList.each(function(){
      $(this).bind('load', check)
             .attr('src', $(this).attr('src'));
    });
    });
    </script>
    </head>
    <body id='ccc'>
    <img src="http://pic8.nipic.com/20100720/145234_090537348485_2.jpg"/>
    <img src="http://pic1a.nipic.com/2009-02-25/2009225211211141_2.jpg"/>
    <img src="http://pic4.nipic.com/20091113/213291_152442048094_2.jpg"/>
    <img src="http://pic3.nipic.com/20090512/1813115_005630566_2.jpg"/>
    <img src="http://pic4.nipic.com/20091113/1982774_180252868907_2.jpg"/>
    <img src="http://junshi.xiansheng.com/uploadfile/2010/1003/20101003103341594.jpg"/>
    <img src="http://pic1a.nipic.com/2008-09-19/200891922637887_2.jpg"/>
    <img src="http://pic4.nipic.com/20091205/1295091_185150911309_2.jpg"/>
    <img src="http://pic1a.nipic.com/2009-02-25/2009225211127244_2.jpg"/>
    <img src="http://pic5.nipic.com/20091229/3374535_001959343200_2.jpg"/>
    </body>
    </html>
      

  4.   

    最简单的就是img的onload
    <img src="http://www.baidu.com/img/baidu_jgylogo3.gif" onload="alert('加载完毕')" />
      

  5.   

    6楼的是给你说原理，1楼的代码用的是也是JQuery的load来检测，其实原理就是用了img的onload方法。只不过jquery做得更加详细还考虑到了浏览器的兼容等多方面因素！
      

  6.   

    其实那段代码还是有优化的余地的，在火狐和chrome下，图片下载完成之后
    可以读取width属性（前提是你不能设置width), 但没有下载完毕之前这个
    属性读不到。IE下这个值始终不能读取。所以可以把那段代码优化下，遍历
    一遍imgList，如果能够读到width，就将计数减1这样，只需要将没有下载
    完毕的IMG绑定onload，这样处理后在非IE下能更快