图片懒加载

懒加载 和 预加载

1. 懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。
2. 预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
3. 两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。
4. 懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。
5. 按需加载：当用户触发了动作时才加载对应的功能。触发的动作，是要看具体的业务场景而言，包
   括但不限于以下几个情况：鼠标点击、输入文字、拉动滚动条，鼠标移动、窗口大小更
   改等。加载的文件，可以是 JS、图片、CSS、HTML 等

html

<ul>
    <li><img src="./imgs/default.jpg" www="./imgs/1.jpg" />li>
    <li><img src="./imgs/default.jpg" www="./imgs/2.jpg" />li>
    <li><img src="./imgs/default.jpg" www="./imgs/3.jpg" />li>
    <li><img src="./imgs/default.jpg" www="./imgs/4.jpg" />li>
    <li><img src="./imgs/default.jpg" www="./imgs/5.jpg" />li>
    <li><img src="./imgs/default.jpg" www="./imgs/6.jpg" />li>
    <li><img src="./imgs/default.jpg" www="./imgs/7.jpg" />li>
    <li><img src="./imgs/default.jpg" www="./imgs/8.jpg" />li>
    <li><img src="./imgs/default.jpg" www="./imgs/9.jpg" />li>
    <li><img src="./imgs/default.jpg" www="./imgs/10.jpg" />li>
ul>
1
2
3
4
5
6
7
8
9
10
11
12

js

let imgs = document.querySelectorAll("img");
let clientHeight =
window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;
function lazyLoad() {
let scrollTop =
    window.pageYOffset ||
    document.documentElement.scrollTop ||
    document.body.scrollTop;
for (let i = 0; i < imgs.length; i++) {
    let x = clientHeight + scrollTop - imgs[i].offsetTop;
    if (x > 0 && x < clientHeight + imgs[i].height) {
    setTimeout(function () {
        imgs[i].src = imgs[i].getAttribute("www");
    }, 2000);
    }
}
}
window.addEventListener("scroll", lazyLoad);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20