网页要展示大量图片时怎样延迟加载图片 lyz.delayLoading.min.js

作者：盐析白兔 | 2024-02-20 20:59:48

踩

lyz.delayloading.min.js

当一个网页中有大量图片时，浏览器会逐个去下载这些图片，等全部下载完毕再执行其它操作，而浏览器本身的http请求的最大并发数量（通常是2个，最多的也只是8个）又限制了全部图片完成下载的时间，这样网页的速度会很慢，导致很差的用户体验。

一个好的实践是当用户向下滚动页面时，在图片出现在用户的可视范围内的时候，去请求相应图片并加载，比如淘宝的页面，这样按需加载图片可省去不必要的带宽浪费（用户可能并不会浏览完本页的全部图片），同时让页面保持快速响应。

实现的原理很简单，就是对于<img>标签，先不要写上它的资源地址src（因为只要写上了，浏览器加载到这个img标签，就会去下载src指向的图片资源），可以把它的资源地址先写在一个临时属性里，下面用到的一段js（相当于一个js小插件）中写在了一个属性originalSrc里（这个属性叫啥都可以的），然后给<img>标签们绑定事件，这个事件就是判断其是否出现在了浏览器的当前显示区域，如果出现了，就把originalSrc指示的资源地址写给<img>标签的src，src写入后浏览器就会去下载图片资源，如此就实现了图片的延迟加载。

用到jquery.js文件和 lyz.delayLoading.min.js 文件（不知哪位牛人写的，学习了！）

lyz.delayLoading.min.js 文件如下：


/*
* Summary: lyz.delayLoading 1.0
* Date: 2011
* Emial: c_sharp@live.cn
*/
jQuery.fn.extend({delayLoading:function(a){function g(d){var b,c;if(a.container===undefined||a.container===window){b=$(window).scrollTop();c=$(window).height()+$(window).scrollTop()}else{b=$(a.container).offset().top;c=$(a.container).offset().top+$(a.container).height()}return d.offset().top+d.height()+a.beforehand>=b&&c>=d.offset().top-a.beforehand}function h(d){var b,c;if(a.container===undefined||a.container===window){b=$(window).scrollLeft();c=$(window).width()+$(window).scrollLeft()}else{b=$(a.container).offset().left;
c=$(a.container).offset().left+$(a.container).width()}return d.offset().left+d.width()+a.beforehand>=b&&c>=d.offset().left-a.beforehand}function f(){e.filter("img["+a.imgSrcAttr+"]").each(function(d,b){if($(b).attr(a.imgSrcAttr)!==undefined&&$(b).attr(a.imgSrcAttr)!==null&&$(b).attr(a.imgSrcAttr)!==""&&g($(b))&&h($(b))){var c=new Image;c.οnlοad=function(){$(b).attr("src",c.src);a.duration!==0&&$(b).hide().fadeIn(a.duration);$(b).removeAttr(a.imgSrcAttr);a.success($(b))};c.οnerrοr=function(){$(b).attr("src",
a.errorImg);$(b).removeAttr(a.imgSrcAttr);a.error($(b))};c.src=$(b).attr(a.imgSrcAttr)}})}a=jQuery.extend({defaultImg:"",errorImg:"",imgSrcAttr:"originalSrc",beforehand:0,event:"scroll",duration:"normal",container:window,success:function(){},error:function(){}},a||{});if(a.errorImg===undefined||a.errorImg===null||a.errorImg==="")a.errorImg=a.defaultImg;var e=$(this);if(e.attr("src")===undefined||e.attr("src")===null||e.attr("src")==="")e.attr("src",a.defaultImg);f();$(a.container).bind(a.event,function(){f()})}});

网页例子：


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>延迟加载图片</title>
    <script src="js/jquery-2.1.4.js" type="text/javascript"></script>
    <script src="js/lyz.delayLoading.min.js" type="text/javascript"></script>
    <style>
        #imgBox{
            width: 700px;padding: 50px;margin:50px auto;
        }
        img{
            width: 600px;height: 400px;display: block;margin-bottom: 50px;
        }
    </style>
    <script>
        $(function () {
            $("img").delayLoading({
                defaultImg: "images/loading.png",   // 预加载前显示的图片  
                errorImg: "",   // 读取图片错误时替换图片(默认：与defaultImg一样)  
                imgSrcAttr: "originalSrc",//记录图片路径的属性(默认：originalSrc，页面img的src属性也要替换为originalSrc)  
                beforehand: 0,  // 预先提前多少像素加载图片(默认：0)  
                event: "scroll", // 触发加载图片事件(默认：scroll)  
                duration: "normal", // 三种预定淡出(入)速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000),默认:"normal"  
                container: window,     // 对象加载的位置容器(默认：window)  
                success: function (imgObj) { }, // 加载图片成功后的回调函数(默认：不执行任何操作)  
                error: function (imgObj) { }  // 加载图片失败后的回调函数(默认：不执行任何操作)  
            });
        });
    </script>
</head>
<body>
 <div id="imgBox">
     <img originalSrc="images/pic1.jpg">
     <img originalSrc="images/pic2.jpg">
     <img originalSrc="images/pic3.jpg">
     <img originalSrc="images/pic4.jpg">
     <img originalSrc="images/lb1.png">
     <img originalSrc="images/lb2.png">
     <img originalSrc="images/lb3.png">
     <img originalSrc="images/lb4.png">    
 </div>
</body>
</html>

效果棒棒哒。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/120878