js图片延迟加载

最新推荐文章于 2025-08-13 21:05:35 发布

weixin_30235225

最新推荐文章于 2025-08-13 21:05:35 发布

阅读量43

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/waters/archive/2012/03/23/2413912.html

本文介绍了一种使用jQuery实现的图片懒加载技术，该技术能够有效提高网页加载速度，特别是对于包含大量图片的网页。通过在页面滚动时仅加载可视区域内的图片，可以显著减少初始加载时间和带宽消耗。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<STYLE>BODY {
    PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
UL {
    PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
LI {
    PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
LI {
    FLOAT: left
}
</STYLE>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
 
<script type="text/javascript">
function initImg(){
    var imgnum=$("img[imgurl]");
    var iScrollTop=$(document).scrollTop();//滚动条滚动
    var iClientHeight=$(window).height();  //可视化区域
    var wintop =iScrollTop+iClientHeight;//滚动条滚动和可视化区域高度
    if(imgnum.length){
        for(var i=0;i<imgnum.length;i++){
            var imgOffsetTop=imgTop(imgnum[i]);
            var imgoffsetHight=imgOffsetTop+imgnum[i].offsetHeight;
            if(iClientHeight>=imgOffsetTop||wintop>=imgOffsetTop){
                loadimg(imgnum[i]);
            }   
        }
    }else{
		$(window).unbind("scroll load resize",initImg);
	}
}

   ///加载图片
            function loadimg(img) {
                $(img).attr("src", $(img).attr("imgurl"));
                $(img).removeAttr("imgurl");
                $(img).css("opacity", 0);
                $(img).css("filter", "alpha(opacity=0)");
                $(img).fadeTo(options.speeds, options.opacitys);
            }

 
//图片到窗体top的高度
function imgTop(element){
 	return element.offsetTop+(element.offsetParent?arguments.callee(element.offsetParent):0);
}
     
</script>
 
</head>
 
<body>
<div id="body"> 
  <ul> 
    <li><img src="img/big_loading.gif" imgurl="img/6.jpg" width="353" height="225" /></li> 
    <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li> 
    <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li> 
    <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li> 
    <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li> 
    <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li> 
    <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li> 
    <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li> 
    <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li> 
    <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li> 
    <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li> 
    <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li> 
    <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li> 
    <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li> 
    <li><img src="img/big_loading.gif" imgurl="img/1.jpg" width="353" height="225" /></li> 
    <li><img src="img/big_loading.gif" imgurl="img/6.jpg"  /></li> 
  </ul> 
</div> 
<script type="text/javascript">
$(document).ready(function(){
	$(window).bind("scroll load resize",initImg);
})
</script>
</body>
</html>

插件式掉用方法

插件编写

(function ($) {
    $.extend({
        LoadImg: function (option) {
            var defaults = {
                imgAttribute: "imgurl",
                speeds: 300,
                opacitys: 1
            }
            var options = $.extend(defaults, option);
            $(window).bind("scroll load resize", initImg);
             function initImg () {
                var imgnum = $("img[" + options.imgAttribute + "]");
                var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                var iClientHeight = document.documentElement.clientHeight + iScrollTop;
                var wintop = iScrollTop + iClientHeight; //滚动条滚动和可视化区域高度
                if (imgnum.length) {
                    for (var i = 0; i < imgnum.length; i++) {
                        var imgOffsetTop = imgTop(imgnum[i]);
                        var imgoffsetHight = imgOffsetTop + imgnum[i].offsetHeight;
                        if (iClientHeight >= imgOffsetTop || wintop >= imgOffsetTop) {
                            loadimg(imgnum[i]);
                        }
                    }
                } else {
                    $(window).unbind("scroll load resize", initImg);
                }
            }
            ///加载图片
            function loadimg(img) {
                $(img).attr("src", $(img).attr("imgurl"));
                $(img).removeAttr("imgurl");
                $(img).css("opacity", 0);
                $(img).css("filter", "alpha(opacity=0)");
                $(img).fadeTo(options.speeds, options.opacitys);
            }

            //图片到窗体top的高度
             function imgTop (element) {
                return element.offsetTop + (element.offsetParent ? arguments.callee(element.offsetParent) : 0);
            }
        }

    })
})(jQuery);
要延迟加载图片的最下面。

    $.LoadImg({
        imgAttribute: "imgurl",
        speeds: 300,
        opacitys: 1
    })