图片懒加载

Posted on | In

图片懒加载

图片优化：

1）压缩或者剪裁

2）减少http请求：使用雪碧图

3）使用字体图标

4）图片懒加载

只有上面这四种方法吗，当然不是，我只了解这四种哈哈哈哈哈🤣

图片懒加载

1）为什么需要懒加载

有的页面会有非常非常多的图片，一进入页面，就去加载全部的图片，会让加载过程变的漫长。而且一次发送那么多请求也会增加服务器压力，并且我打开一个页面，可能我只会浏览部分内容，有些没浏览到的地方，其实我是不需要加载出来的，我们只需要加载需要的资源，显然这样子是不合理的。

2）实现思路

1.我们给图片的src指向一个小图片，并且设置自定义属性data-src指向图片真实的地址

2.当图片进入可视区域的时候，将src替换成data-src的地址

3）具体实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    img {
        width: 300px;
        height: 400px;
    }
</style>

<body>

    <img class="img" src="./WX20181226-213426@2x.png" data-src="https://t12.baidu.com/it/u=457029110,106075125&fm=76" />
    <img class="img" src="./WX20181226-213426@2x.png" data-src="https://t12.baidu.com/it/u=457029110,106075125&fm=76" />
    <img class="img" src="./WX20181226-213426@2x.png" data-src="https://t12.baidu.com/it/u=457029110,106075125&fm=76" />
    <img class="img" src="./WX20181226-213426@2x.png" data-src="https://t12.baidu.com/it/u=457029110,106075125&fm=76" />
    <img class="img" src="./WX20181226-213426@2x.png" data-src="https://t12.baidu.com/it/u=457029110,106075125&fm=76" />
    <img class="img" src="./WX20181226-213426@2x.png" data-src="https://t12.baidu.com/it/u=457029110,106075125&fm=76" />
</body>
<script>
    window.onload = function () {
        const clientHeight = document.documentElement.clientHeight;
        var imgList = document.querySelectorAll('.img');
        var len = imgList.length;
        window.onscroll = function () {
            lazyLoad();
        }
        function lazyLoad() {
            for (var i = 0; i < len; i++) {
                if ((imgList[i].offsetTop - document.documentElement.scrollTop) < clientHeight) {
                    imgList[i].src = imgList[i].dataset.src;
                }
            }
        }
        lazyLoad();
    }
</script>

</html>

可以看到，进入视图的两张图片src已经替换成真正的图片地址了，而下面未进入视图的，还是默认图片地址。

4）就这样结束了吗，当然不是

针对于这种触发频率比较高的，最好使用防抖（函数防抖）和节流（函数节流），也是为了性能的问题，其实经常把两个搞混，这次也顺便好好记住以下。

那么手写一下简单的实现：

1.防抖（debounce）：无法调用触发多少次，都在最后一次触发之后延时一段时间之后执行调用。

防抖函数：

1
2
3
4
5
6
7
8
9
function debounce(fn,delay){
    var id;
    return function(){
        clearTimeout(id);
        id = setTimeout(function(){
            fn();
        },delay)
    }
}

具体实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    img {
        width: 300px;
        height: 400px;
    }
</style>

<body>

    <img class="img" src="./WX20181226-213426@2x.png" data-src="https://t12.baidu.com/it/u=457029110,106075125&fm=76" />
    <img class="img" src="./WX20181226-213426@2x.png" data-src="https://t12.baidu.com/it/u=457029110,106075125&fm=76" />
    <img class="img" src="./WX20181226-213426@2x.png" data-src="https://t12.baidu.com/it/u=457029110,106075125&fm=76" />
    <img class="img" src="./WX20181226-213426@2x.png" data-src="https://t12.baidu.com/it/u=457029110,106075125&fm=76" />
    <img class="img" src="./WX20181226-213426@2x.png" data-src="https://t12.baidu.com/it/u=457029110,106075125&fm=76" />
    <img class="img" src="./WX20181226-213426@2x.png" data-src="https://t12.baidu.com/it/u=457029110,106075125&fm=76" />
</body>
<script>
    window.onload = function () {
        const clientHeight = document.documentElement.clientHeight;
        var imgList = document.querySelectorAll('.img');
        var len = imgList.length;
        window.onscroll = function () {
            loadImg();
        }
        function lazyLoad() {
            for (var i = 0; i < len; i++) {
                if ((imgList[i].offsetTop - document.documentElement.scrollTop) < clientHeight) {
                    imgList[i].src = imgList[i].dataset.src;
                }
            }
        }
        function debounce(fn, delay) {
            var id;
            return function () {
                clearTimeout(id);
                id = setTimeout(function () {
                    fn();
                }, delay)
            }
        }
        var loadImg = debounce(lazyLoad, 5000);
        lazyLoad();
    }
</script>

</html>

我这里设置了5秒是为了看效果。。实际写的时候，触发间隙估计也会写的很小，我是觉得用防抖或者节流都可以，可是网上说这种加载最好使用节流，那就看看节流吧

2.节流（throttle）：不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数

节流函数：

凭自己的感觉写：想法是一开始记录一下时间date，然后频繁触发事件的时候，如果当前时间减上次记录的时间小于延时的时间，就不执行。如果满足条件，就执行，并且记录最后执行的时间。

1
2
3
4
5
6
7
8
9
function throttle(fn,delay){
    var date = +new Date();
    return function(){
        if(+new Date() - date >delay){
            date = +new Date();
            fn();
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    img {
        width: 300px;
        height: 400px;
    }
</style>

<body>

    <img class="img" src="./WX20181226-213426@2x.png" data-src="https://t12.baidu.com/it/u=457029110,106075125&fm=76" />
    <img class="img" src="./WX20181226-213426@2x.png" data-src="https://t12.baidu.com/it/u=457029110,106075125&fm=76" />
    <img class="img" src="./WX20181226-213426@2x.png" data-src="https://t12.baidu.com/it/u=457029110,106075125&fm=76" />
    <img class="img" src="./WX20181226-213426@2x.png" data-src="https://t12.baidu.com/it/u=457029110,106075125&fm=76" />
    <img class="img" src="./WX20181226-213426@2x.png" data-src="https://t12.baidu.com/it/u=457029110,106075125&fm=76" />
    <img class="img" src="./WX20181226-213426@2x.png" data-src="https://t12.baidu.com/it/u=457029110,106075125&fm=76" />
</body>
<script>
    window.onload = function () {
        const clientHeight = document.documentElement.clientHeight;
        var imgList = document.querySelectorAll('.img');
        var len = imgList.length;
        window.onscroll = function () {
            loadImg();
        }
        function lazyLoad() {
            for (var i = 0; i < len; i++) {
                if ((imgList[i].offsetTop - document.documentElement.scrollTop) < clientHeight) {
                    imgList[i].src = imgList[i].dataset.src;
                }
            }
        }

        function throttle(fn, delay) {
            var date = +new Date();
            return function () {
                if (+new Date() - date > delay) {
                    date = +new Date();
                    fn();
                }
            }
        }
        var loadImg = throttle(lazyLoad, 5000);
        lazyLoad();
    }
</script>

</html>
总结

有个感觉很好理解的话来描述防抖与节流

防抖：像公交车，最后一个人上车了，并且没有人上车，才可以发车

节流：像公交车，起点站你能下车，之后比如10分钟到一个站，到站才能下，10分钟之内都是不允许下车。