预加载

实现思路

new一个新的Imgnode，给Imgnode的src赋值为真正的src；该Imgnode在加载完毕后相应的图片资源就会在本地缓存。

function  preLoad (...src) {
    src.forEach(item  => {
        const  imgNode = new Image()
        imgNode.src = realSrc
    })
}

懒加载

实现思路

首先设置一个临时属性 data-src，当前元素是否出现在视口时使用 src 代替 data-src。

1. window.onscroll + clientTop，offsetTop，clientHeight scrollTop + 节流 👎

   不容易判断元素的位置

2. window.onscroll + Element.getBoundingClientRect() + 节流👎

   getBoundingClientRect会触发回流

3. IntersectionObserver👍

   <img  style="width: 200px;"  id="img"  data-src="./assets/yoda.jpg"  alt=""  srcset="">
   
   const  observer = new  IntersectionObserver(changes=> {
       changes.forEach(change  => {
           // change.isIntersecting 判断当前元素是否出现在视口中
           if (change.isIntersecting) {
               const  img = change.target
               img.src = img.dataset.src
               Reflect.deleteProperty(img.dataset, "src")
               observer.unobserve(img)
           }
       })
   })
   observer.observe(document.querySelector("#img"))
   

4. img的lazy属性 👎

   兼容性差，具体实践

   <img loading="lazy" src="http://blog.p18c.top/imgs/avatar.png" alt="" srcset="">

预加载 VS 懒加载

| | 预加载 | 懒加载 | |