Lazyload

时间：2023-04-02 14:20:35 HTML

带有加载进度的Web图片懒加载组件在Web项目中，大量的图片应用会导致页面加载时间过长，浪费不必要的带宽成本，影响用户的浏览体验。Lazyload是一个懒惰的图片加载组件，文件大小只有4kb（不依赖其他第三方库）。组件会根据用户当前浏览的区域自动加载相应的图片（用户还没有浏览过的区域的图片不会加载）。Lazyload允许在加载图像之前指定一个相对较小的封面图像。该组件将首先加载封面图像以优化用户的浏览体验。加载原始图像时，它将覆盖封面图像。另外，Lazyload还可以获取当前图片的加载进度。效果演示LazyloadDemo-defaultLazyloadDemo-自定义提示如何使用？2.1Htmlhtml设置data-src属性.data-cover不是必须的

2.2向页面导入./dist/Lazyload.js文件或者让Lazyload=require('./dist/Lazyload.js');2.3初始化//获取元素vareList=[];eList.push.apply(eList,文件t.getElementsByClassName('img'));eList.push.apply(eList,document.getElementsByClassName('imgBg'));//创建Lazyvarlazy=newLazyload({obj:eList,//elementsrange:200//额外范围});////自定义提示//lazy.tips=function(obj){//vare=obj.o,//element//schedule=obj.schedule;//加载调度//console.log(e,schedule);//};//Initlazy.init();