您现在的位置是:首页>Web前端Web前端

懒加载提高页面性能

胡小浪2019-06-17【Web前端】943人已围观

简介懒加载,就是延迟加载。针对于多图片的页面,只有当该图片出现在页面视区中时,再加载该图片。。可以防止页面一次性加载完所有的图片,用户等待时间较长,影响用户体验。

如何实现懒加载


 1. 将页面中的图片的src属性设置为空,并将src属性真正的值存放在自定义属性data-originnal(自定义属性以data-开头)。


 2.为页面中的图片设置好大小,防止引起页面的回流,影响性能。


 3.判断元素是否进入用户视野中。(利用元素的offsetTop属性与  scrollTop、clientTop之间的关系判断)。若进入视野,则将      data-original属性的值赋给图片的src属性


 4.  滚动,重复判断元素是否进入视野。

具体实现:

1.设计HTML

<imgdata-original="mogu.jpg"alt=""class="picture"src="">

2.判断元素是否进入视野

if(scrollTop+height>offsetTop){					

var img = new Image(); //跨域异步请求图片

img.onload = function () {
console.log(1);
item.src = img.src;
}
img.src = item.dataset.original; //获取自定义对象的属性
}

完整代码:

<script>
var images=document.getElementsByTagName('img');
function lazyload() {
Array.prototype.forEach.call(images,function(item,index) {

var height=document.documentElement.clientHeight;
var scrollTop=document.documentElement.scrollTop;
var offsetTop=item.offsetTop;

if(scrollTop+height>offsetTop){

var img = new Image();
img.onload = function () {
item.src = img.src;
}
img.src = item.dataset.original;
}
});
}
lazyload(); //第一次加载页面时需要自动加载

document.addEventListener("scroll",lazyload);

</script>

获取自定义的属性


   1.通过element.dataset.original.


      语法:


                


     基本上最新的浏览器都支持,对于低版本的浏览器兼容性不好。




  对于 element.dataset的详细使用,参考链接点击打开链接


  对于如何兼容低版本的浏览器,请参考   我的文章 ,实现兼容版本的element.dataset。


  2.通过 document.getAtrribute(“data-original”);


     兼容性好


六、代码的其他问题


   判断元素是否在可视区域时,会重复判断元素,造成浪费。

使用echo.js库实现预加载


  echo.js使用原生js编写,不需要依赖其他库。可独立使用。(lazyload是jquery插件,使用时必须引入jquery,功能完善)


      1. 下载并引入echo.js。   


<script src="https://cdn.bootcss.com/echo.js/1.7.3/echo.js"></script>

      2.设置图片的自定义属性为data-echo


      3. 使用:获取元素并调用init()方法。接收一个对象。对象参数如下。


         offset:图片在可视区域下方一段距离时,开始加载


         throttle:图片延迟多少毫秒后加载。    


         unload:是否卸载在可视区域外面的图片。默认为false。            


echo.init({

offset:0,

throttle:0,

unload:true,

callback:funtion(element,op){

 

}

});


原文:https://blog.csdn.net/qq_33745501/article/details/79646739 




Tags: 懒加载

扫一扫分享本页

很赞哦! (1)