js-页面需展示大量图片时，采用lyz.delayLoading.min.js，图片在屏幕时加载显示

Posted 2020-11-19 YAZI

本文本内容拷贝至：https://blog.csdn.net/xuanwuziyou/article/details/48199123    

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

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

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

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

 

<div>

<img originalSrc="images/img1.png"/>

<img originalSrc="images/img2.png"/>

<img originalSrc="images/img3.png"/>

<img originalSrc="images/img4.png"/>

<img originalSrc="images/img5.png"/>

<img originalSrc="images/img6.png"/>

</div>

 

<script src="js/jquery-2.1.4.js" type="text/javascript"></script>  

<script src="js/lyz.delayLoading.min.js" type="text/javascript"></script>  

<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>