分享一段自用的JavaScript图片懒加载代码

什么是图片懒加载？举个例子，如代码狗博客打开后，所有文章缩略图都是一张同样的待加载图片，我的首页一页10篇文章，十篇文章使用同一张图片，当访客访问我的网站时，网页首先加载了网页结构与一张缩略图，这张缩略图会被用到所有文章上，如果其它文章列表不出现在访客视野中，浏览器就不会加载真实的缩略图。这样浏览器就会认为，网页已经加载完毕，事实上图片并没有被加载。当访客滑动网页，缩略图进入浏览器可视区域，就使用JavaScript加载真实缩略图。

分享一段自用的JavaScript图片懒加载代码

图片懒加载原理

利用JavaScript读取进入浏览器可视区域的所有img图片标签，并读取date-src属性值，不一定非得这个属性，也可以是其它属性。我们在写网站后台程序的时候，生成的img标签就不要给src属性真实图片地址，而是使用默认待加载提示图片，将真实图片地址给date-src属性，如下代码形式：

<img date-src="https://www.daimadog.com/logo.png" src="https://www.daimadog.com/1.png"/>

JavaScript懒加载核心代码

    lazyRender();
       //预防滚动屏幕时重复判断执行
        var clock; 
        $(window).on('scroll', function () {
            if (clock) { 
                clearTimeout(clock);
            }
            clock = setTimeout(function () 
                lazyRender();
            }, 300)
        });
//图片是否需要载入判断
        function lazyRender() {
            $('img').each(function () {
                if (checkShow($(this)) && !isLoaded($(this))) {
                    loadImg($(this));
                }
            })
        }
//检查图片是否在可视区域
        function checkShow($img) { // 传入一个img的jq对象 
            var scrollTop = $(window).scrollTop(); //即页面向上滚动的距离 
            var windowHeight = $(window).height(); // 浏览器自身的高度
            var offsetTop = $img.offset().top; //目标标签img相对于document顶部的位置 
            if (offsetTop < (scrollTop + windowHeight) && offsetTop > scrollTop) { //在2个临界状态之间的就为出现在视野中的 
                return true;
            }
            return false;
        }
//检查是否已加载
        function isLoaded($img) {
            return $img.attr('data-src') === $img.attr('src'); //如果data-src和src相等那么就是已经加载过了 
        }
//加载图片
        function loadImg($img) {
            $img.attr('src', $img.attr('data-src')); // 加载就是把自定义属性中存放的真实的src地址赋给src属性 
        }

注意：很明显这些代码使用了jQuery语法，所以你需要在本段代码之前先载入jQuery，否则会执行错误哟！代码是没有问题的，亲测有效！