当前位置:Gxlcms > JavaScript > 细说jQuery如何实现懒加载

细说jQuery如何实现懒加载

时间:2021-07-01 10:21:17 帮助过:7人阅读

一、为什么需要懒加载?

  • 对于图片过多的使用场景,为了提高页面加载速度,改善用户体验,我们对未出现在视野范围内的图片先不进行加载,等到出现在视野范围才去加载。

二、懒加载的实现原理

-它的实现原理很简单,先把img的src指向一个小图片,图片真实的地址存储在img一个自定义的属性里,<img src="lazy-load.png" src="xxx" />,等到此图片出现在视野范围内了,获取img元素,把src里的值赋给src。

三、实现懒加载必备的知识点

(一)获取窗口、窗口滚动和元素距离窗口顶部的偏移高度,计算元素是否出现在窗口可视范围内;


Paste_Image.png

    function isShow($el){
      var winH = $(window).height(),//获取窗口高度
            scrollH = $(window).scrollTop(),//获取窗口滚动高度
            top = $el.offset().top;//获取元素距离窗口顶部偏移高度
      if(top < scrollH + winH){
          return true;//在可视范围
        }else{
          return false;//不在可视范围
        }
      }
(二)监听窗口滚动事件,检查元素是否在可视范围内;
    $(window).on('scroll', function(){//监听滚动事件
        checkShow();
    })
    checkShow();
    function checkShow(){//检查元素是否在可视范围内
        $('img').each(function(){//遍历每一个元素
            var $cur = $(this);
            if(!!isloaded($cur)){return;}//判断是否已加载
            if (isShow($cur)) {
              setTimeout(function(){
                showImg($cur);
                },300)//设置时间是为了更好的看出效果
            };
        });
    }
(三)元素显示的时候把之前的默认照片替换成src里的照片。
    function showImg($el){
        $el.attr('src', $el.attr('src'));
        $cur.data('isloaded',true);
    }


Paste_Image.png


Paste_Image.png

以上就是细说jQuery如何实现懒加载的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行