代码狗

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

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

分享一段自用的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,否则会执行错误哟!代码是没有问题的,亲测有效!

感觉很棒!可以赞赏支持我哟~

赞(2) 打赏

请作者吃个烤肠

支付宝扫一扫打赏

微信扫一扫打赏