Rumah > hujung hadapan web > tutorial js > 细说jQuery如何实现懒加载

细说jQuery如何实现懒加载

PHPz
Lepaskan: 2017-04-04 13:44:05
asal
2381 orang telah melayarinya

一、为什么需要懒加载?

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

二、懒加载的实现原理

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

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

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

细说jQuery如何实现懒加载

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;//不在可视范围
        }
      }
Salin selepas log masuk
(二)监听窗口滚动事件,检查元素是否在可视范围内;
    $(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)//设置时间是为了更好的看出效果
            };
        });
    }
Salin selepas log masuk
(三)元素显示的时候把之前的默认照片替换成src里的照片。
    function showImg($el){
        $el.attr('src', $el.attr('src'));
        $cur.data('isloaded',true);
    }
Salin selepas log masuk

细说jQuery如何实现懒加载

Paste_Image.png

细说jQuery如何实现懒加载

Paste_Image.png

Atas ialah kandungan terperinci 细说jQuery如何实现懒加载. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan