JS实现图片延迟加载（lazyload改编）

迈不过友情╰ 2022-08-19 11:24 469阅读 0赞

为什么改写JS版：

移动端做运营活动到时候经常需要用到大量的图片，图片过多导致加载过慢，用户体验差，插件lazyload.js需要依赖JQuery,单页面如果需要采用这个插件需要加载JQuery，JQuery.min也有80多kb，为了一个功能需要引入一个80多kb的文件，得不偿失。

场景：

网页使用大量图片的时候，由于图片资源过大会导致加载时间大幅度延长

作用：

缩短第一次加载网页的时间，让网页尽快呈现在用户眼前。

原理：

先加载可视区的图片，剩余图片由滚动条来决定是否需要加载。

前期准备：

1px像素的图片一张（不带任何东西的png图片：p.png），作用：防止img标签中没有图片地址导致该位置在不同浏览器中的呈现不同，例如有些浏览器出现X的标志

实现步骤：

1：不在可视区的图片用1px的p.png图片替代显示。

<img src="p.png" data-url="img\_06.png" alt=""/>  
  
        2：以滚动条、图片、可视区高度作为条件判断图片是否需要加载，如果需要，则将替换src的图片路径

var windowH=document.documentElement.clientHeight;//可视区高度  
         imgs=document.getElementsByTagName('img');  
         imgTop=imgs\[i\].offsetTop;//图片距离顶部高度  
         scTop=document.documentElement.scrollTop || document.body.scrollTop;//滚动条高度  
  
         条件：imgTop-windowH<scTop && imgTop-windowH>0  //需要加载图片

条件成立则将该图片的 data-url地址赋给 src地址

代码：

html:

<div>

</div>

js:

window.οnlοad=function () \{

var windowH,//可视区高度

imgs,

imgTop,

dataUrl,

scTop;//滚动条高度