求助js判断内容是否加载完成的问题！

Question

页面上有个按钮，点了之后会在页面上再显示一部分内容，内容中包含图片，图片可能会有点大，加载需要点时间。我想要在图片显示完成之后再执行一段脚本。
问题是，怎么判断图片是否显示完成了呢？

Answer 1

var img = document.createElement('img');
img.src = "图片url";
img.onload= function(){alert('已经完成')}

Answer 2

给你一个思路吧。如果有更好的大家也分享下吧。在你加载图片之前应该可以知道一共有几幅图片吧
假设图片有 N 
那么页面首先生成全局变量total = N；那么你在图片 的onload事件里调用 某个函数b
function（）
{
   你想做的任何事情
   total--;
   if(total ==0)
   {
       调用某个你想要的函数
    }
}

Answer 3

在设置innerHTML前获取有多少张图片保存到一个全局变量中，然后替换内容给内容中的图片添加onload事件用于增加一个变量的值，最后设置容器的内容这样每次img执行onload的时候+1变量，用当前的值和保存图片总数量的变量比较，相等就是加载完毕了

Answer 4

模型大概如下
<script>
    var s = '<a id="imgHref0" target="_blank" href="/jiazhuang/20121024/10030.aspx"><img src="http://www.lvzhou168.com/upload/20120906/3-120Z61F10HS.jpg" id="imgObj0" class="imgObj" alt="避开不良风水 睡床摆放有讲究" style="display: block;"></a>'
    + '文字内容<a id="imgHref0" target="_blank" href="/jiazhuang/20121024/10032.aspx"><img src="http://www.lvzhou168.com/upload/20120906/3-120Z61A920315.jpg" id="imgObj0" class="imgObj" alt="小摆设 不能随意摆放在卧室空间"></a>';
    var total=0, now = 0;
    function imgloading() {
        now++;
        if (now == total) alert('内容加载完毕');
    }
    function loadcontent(id) {
        total = now = 0;
        s = s.replace(/(<img) /ig, function ($0, $1) { total++; return $1 + ' onload="imgloading()" ' });
        var o = document.getElementById(id);
        o.innerHTML = s;
    }
</script>
<div id="content"></div><input type="button" value="load" onclick="loadcontent('content')"/>

Answer 5

上面几位已经把单个图片和多个图片的处理方法都说了.区别主要是计数问题.
关于多图片,我建议在后台返回数据时顺便直接写入图片数量,这样可以省去客户端的运算.
返回字串的形式如:  正常内容<自定义分隔符>图片数量如5
这样只要split一下就可以直接得到5,内容较多时效率会好些.