图片懒加载

分手后的思念是犯贱 2022-06-17 13:49 167阅读 0赞

在一个项目中，如果同时加载的图片太多的话，会导致页面卡顿，这个时候就会用到懒加载。懒加载的实现原理是监听浏览器的滚动条事件，先加载出前面几张图片，然后当滚动条滚动的时候再依次加载剩余的图片。（先在图片那里设置属性data-img="";然后调用方法，在适当的时候把src设置为data-img的值）

\----------------------JS如下（HTML省略）

//懒加载图片 var lazyLoad = (function(){
        var clock;
        function init(){
            $(".datagrid-view2 .datagrid-body").on("scroll", function(){//对当前的滚动条对象进行监听，如果是整个浏览器滚动条，则是$(window)
                if (clock) {
                    clearTimeout(clock);
                }
                clock = setTimeout(function(){
                    checkShow();
                }, 200);
            });
            checkShow();
        }
    
        function checkShow(){
            $("img.lazy").each(function(){
                var $cur =$(this);
                if($cur.attr('isLoaded')){
                    return;
                }
                if(shouldShow($cur)){
                    showImg($cur);
                }
            });
            $(".centerImgProgress").css("display","none");
        }
        function shouldShow($node){
            var top = $node.offset().top;//每张图片距离页面顶部的高度 if(top < 1200){
                return true;
            }else{
                return false;
            }
        }
        function showImg($node){
            $node.attr('src', $node.attr('data-img'));
            $node.attr('isLoaded', true);
        }
        return {
            init: init
        }
    })()

然后需要在页面初始化加载完成后加上：lazyLoad.init();就可以了。