笔记 - 图片的加载 & 懒加载

实现图片的加载

function createImg(url, delay) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.src = url;
        setTimeout(() => {
            document.body.appendChild(img);
            resolve();
        }, delay);
    });
}

createImg('https://img2.baidu.com/it/u=575711754,3157460132&fm=26&fmt=auto&gp=0.jpg', 2000)
    .then(() => {
        createImg('https://img2.baidu.com/it/u=2597283190,2423487059&fm=26&fmt=auto&gp=0.jpg', 4000);
    })
    .then(() => {
        createImg('https://img2.baidu.com/it/u=602619791,1793937306&fm=26&fmt=auto&gp=0.jpg', 6000);
    });

image.png

图片的懒加载

• 实现方案：
  1. 在img标签内自定义一个属性data-src，用于暂存图片地址
  2. 获取屏幕可视区域的尺寸
  3. 获取当前图片上边距到窗口的距离
  4. 判断当前元素在可视区域内，则将data-src的value赋值给src。否则，不执行任何操作。

• 细节

  1. 提前加载，可以+100像素
  2. 滚动时只处理未加载的图片
  3. 利用数据节流兼顾性能

• 判断是否在可视区域的三种方式：

  1. 屏幕可是区域的高度 + 滚动条滚动的距离 > 元素到文档顶部的距离
     (document.documentElement.clientHeight + document.documentElement.scrollTop > element.offsetTop)
  2. 使用getBoundingClientRect()获取元素大小和相对于视口的位置（各个浏览器都支持）
  3. IntersectionObserver提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。祖先元素与视窗(viewport)被称为根(root)（各浏览器兼容性较差）

• HTML代码

• JS - 获取所有img及节流

• JS - 方法1

• JS - 方法2

• JS - 方法3

只加载两张图片

提前100像素加载图片