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

Posted YAZI

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js-页面需展示大量图片时,采用lyz.delayLoading.min.js,图片在屏幕时加载显示相关的知识,希望对你有一定的参考价值。

本文本内容拷贝至: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>

以上是关于js-页面需展示大量图片时,采用lyz.delayLoading.min.js,图片在屏幕时加载显示的主要内容,如果未能解决你的问题,请参考以下文章

Laya 类列表加载优化

假设业务需要,在页面一屏中一次性展示大量图片(100张),导致img组件同时发起大量的请求,导致浏览器性能被消耗殆尽,页面卡死。怎么优化?

web页面上展示图片时,图片不显示,报错:ERR_CONTENT_LENGTH_MISMATCH

处理点击tab标签时Echarts图片显示不全的问题

JS实现图片预加载无需等待

图片预加载和懒加载