图片的懒加载预加载

Posted 2021-09-29 水香木鱼

原理：

       预加载原理：

就是在网页全部加载之前，提前加载图片，当用户需要查看时可直接从本地缓存中渲染，以提供给用户更好的体验，减少等待的时间。

       图片懒加载原理（缓载）：

通过监听onscroll事件判断资源位置，延迟加载图片或符合某些条件时才加载某些图片。首先为所有懒加载的静态资源添加自定义属性字段，比如如果是图片，可以指定data-src为真实的图片地址，src指向loading的图片。 然后当资源进入视口的时候，将src属性值替换成data-src的值。 可以使用元素的getBoundingRect().top判断是否在视口内，也可以使用元素距离文档顶部的距离offsetTop和scrollTop是否小于视口高度来判断

JS代码：

window.onload = function(){

//获取当前浏览器视口高度

var viewHeight = document.documentElement.clientHeight;

console.log(viewHeight);

//鼠标滚动回调

function lazyload(){

var img = document.getElementsByClassName("img");

for(let item of img){

//获取每张图片距离顶部的距离

var imgHeight = item.getBoundingClientRect();

console.log(imgHeight)

//判断当图片出现在视口160px的时候把地址放入src中，显示出图片

if(imgHeight.top < (viewHeight - 10)){

item.src = item.getAttribute("data-original");

        }

    }

}

lazyload(); //页面加载时把当前视口中的图片加载进来

document.addEventListener("scroll",lazyload);

}

 HTML代码：

<img class="img" lazyload="true" data-origin="图片http地址">
<img class="img" lazyload="true" data-origin="图片http地址">
<img class="img" lazyload="true" data-origin="图片http地址">
<img class="img" lazyload="true" data-origin="图片http地址">
<img class="img" lazyload="true" data-origin="图片http地址">