【性能优化】JS实现图片懒加载

当打开一个网页的时候，如果网页中图片数量很多，那么加载压力过大，页面比较卡顿；

但实际上，我们看到的图片仅仅是首屏那几张，当用户没有向下滚动的时候，就不需要加载下面的图片。

【原理】

先将img的src链接设置为同一张图片（比如空白图片），然后给img设置自定义属性（比如data-src属性），并将真正的图片地址存储在data-src中，当JS监听到当前图片元素进入到可视窗口时，将自定义属性中的图片地址赋给src属性，达到懒加载效果。

代码比较简单，简单附上：

<!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>lazy-load</title>
    <style>
        html,
        body {
            margin: 0px;
            padding: 0px;
        }

        .container img {
            width: 50%;
            height: 200px;
        }
    </style>
</head>

<body>
    <div class="container">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
            data-src="http://img1.imgtn.bdimg.com/it/u=3990342075,2367006974&fm=200&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
            data-src="http://img4.imgtn.bdimg.com/it/u=2539922263,2810970709&fm=200&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
            data-src="http://img4.imgtn.bdimg.com/it/u=1878067600,3935137756&fm=200&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
            data-src="http://img2.imgtn.bdimg.com/it/u=3844233833,3942617167&fm=200&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
            data-src="http://img3.imgtn.bdimg.com/it/u=346230831,1833217134&fm=200&gp=0.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
            data-src="https://p3.ssl.qhimgs1.com/sdr/400__/t01678fb48c7fc2de99.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
            data-src="https://p0.ssl.qhimgs1.com/sdr/400__/t01ad9a266ccb869064.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
            data-src="https://p3.ssl.qhimgs1.com/sdr/400__/t013e365ee605a216e9.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
            data-src="https://p3.ssl.qhimgs1.com/sdr/400__/t01d32b580344adff93.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
            data-src="https://p5.ssl.qhimgs1.com/sdr/400__/t01c301b9d7753c1c4f.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
            data-src="https://p2.ssl.qhimgs1.com/sdr/400__/t01d7df0764e1cf0e02.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
            data-src="https://p3.ssl.qhimgs1.com/sdr/400__/t01c4d2f812116f7e8d.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
            data-src="https://p0.ssl.qhimgs1.com/sdr/400__/t01d414d58f43519826.jpg">
        <img src="http://s4.sinaimg.cn/mw690/006uWPTUgy72CNFYNjB93&690"
            data-src="https://p1.ssl.qhimgs1.com/sdr/400__/t010cb2a916e4dd2d2b.jpg">
    </div>
    <script>
        // 利用闭包实现节流
        function throttle(func, time) {
            let timer; 
            return function () {
                if (timer) {
                    return false;
                }
                timer = setTimeout(function () {
                    func();
                    clearTimeout(timer);
                    timer = '';
                }, time)
            }
        }

        function start() {
            let imgArr = Array.from(document.getElementsByTagName('img'));
            imgArr.forEach(function (item, index) {
                if (!item.getAttribute('isLoading')) {
                    if (item.offsetTop <= window.innerHeight + document.documentElement.scrollTop + 200) {
                        let src = item.getAttribute('data-src');
                        item.src = src;
                        item.setAttribute('isLoading', 'true');
                    }
                }
            })
        }

        window.onscroll = throttle(start, 200);
        start();
    </script>
</body>

</html>

如果是vue项目，可以直接使用vue-lazyload插件，使用方法可以转至另一篇随笔【vue】vue-cli3构建项目中实现图片懒加载

【参考文章】

使用js进行图片懒加载

使用jQuery实现图片懒加载

【性能优化】JS实现图片懒加载

推荐阅读