js图片延迟加载

<!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
    })

相关阅读:
对于excel的操作
 初试 ElasticSearch
02-基本数据类型
 javascript 三种数组扁平化方式
 javascript数组操作方法
 javascript数组的16种循环(包含ES5、ES6)
01-typescript-安装及编译
 nvm管理多版本node
css块级居中的四种方法
 javascript try-catch-finally异常捕获
原文地址：https://www.cnblogs.com/waters/p/2413912.html