加载多张图片，判断加载完成状态

最新推荐文章于 2024-11-21 10:17:20 发布

转载最新推荐文章于 2024-11-21 10:17:20 发布 · 353 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/laneyfu/p/4479660.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript实现的图片懒加载技术，该技术通过监听图片加载状态并延迟加载非可视区域内的图片来提高网页加载速度。文中提供了一个实用的jQuery插件示例，展示了如何在实际项目中应用这一技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var totalimages = 10; 
var loadedimages = 0;$('<img/>').load(function() {
++loadedimages; 
if(loadedimages == totalimages)
{
//全部图片加载完成时….. 
} });

或者参考别人的一个插件代码：

(function(){
    $.fn.imgLoad = function(options){
        var opts = $.extend({
            time:4000, ///等待载入时间，如果超过这个时间就直接执行回调
            callback:function(){} //默认回调
        }, options);
        var $this = this,i = 0, j = 0, len = this.length;
        $this.each(function(){
            var _this = this,
                dateSrc = $(_this).attr("date-src"),
                imgsrc = dateSrc?dateSrc:_this.src;
            var img = new Image();
            img.onload = function(){
                img.onload = null;
                _this.src = imgsrc;
                i++;
            };
            img.src = imgsrc;
        });
        var t = window.setInterval(function(){
            j++;
            $("#msg").html(i);
            if (i==len || j*200>=opts.time){
                window.clearInterval(t);
                opts.callback();
            };
        },200);
    }

})(jQuery);

html结构

注：date-src 属性是真实的图片地址 src放一个loading...的gif 图片，不带date-src 也是可以的！！！

<img date-src="http://dl.yzz.cn/public/images/100608/29_161214_3.jpg" src="http://www.mb5u.com/uploads/sucai/20088258937562778016.gif" />
<img date-src="http://www.asianfinancialforum.com/aff2010/eng/photos/images/large/p8.jpg" src="http://www.mb5u.com/uploads/sucai/20088258937562778016.gif"  />
<img date-src="http://www.asianfinancialforum.com/aff2010/eng/photos/images/large/p13.jpg" src="http://www.mb5u.com/uploads/sucai/20088258937562778016.gif" />

调用

$(function(){
    $("img").imgLoad({
        time:10000000,//设置足够大 须等待图片载入完成，但是404的时候就杯具了...
        callback:function(){
            alert("载入完成")    
        }
    });    
})

转载于:https://www.cnblogs.com/laneyfu/p/4479660.html