jquery监控图片加载是否完成

2013年09月10日 03:04:13

作者： Zjmainstay

本文提供jQuery监控图片加载是否完成的处理方法。

//监控所有图片的加载情况
$("img").each(function(index, el) {
    $(this).load(function() {
        alert('图片'+$(el).attr('src')+'成功加载！');
    }).error(function(){
        //这里可以做进一步处理，如通过Ajax转换地址读取另一个图片服务器的数据
        alert('图片'+$(el).attr('src')+'加载失败！');  
    });
});

   一个例子

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;script type="text/javascript" src="http://zjmainstay.cn/jquerylib/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;       
        $(function(){
            var imgs = [
                "http://himg.bdimg.com/sys/portrait/item/9b825a6a6d61696e737461790a1c.jpg",
                "http://4.su.bdimg.com/icon/weather/48_48/a0.jpg"
              ];
            for(var i=0;i&lt;imgs.length;i++){
                //直接将图片插入到body中，初始化时隐藏，加载完成才显示
                $("&lt;img style='width:200px; height:200px;' class='appendImg'/&gt;").attr("src", imgs[i]).hide().appendTo($("body"));
            }
            //这个要放在后面，监控appendImg图片加载
            $(".appendImg").on('load',function(){
                $(this).show();        //加载完成才显示
            });
        });
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;