首頁 > web前端 > js教程 > 主體

細說jQuery如何實現懶加載

PHPz
發布: 2017-04-04 13:44:05
原創
2286 人瀏覽過

一、為什麼需要懶加載?

  • 對於圖片過多的使用場景,為了提高頁面加載速度,改善用戶體驗,我們對未出現在視野範圍內的圖片先不進行加載,等到出現在視野範圍才去加載。

二、懶載入的實作原理

-它的實作原理很簡單,先把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;//不在可视范围
        }
      }
登入後複製
(二)監聽視窗捲動事件,檢查元素是否在視覺範圍內;
    $(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);
    }
登入後複製

細說jQuery如何實現懶加載

Paste_Image.png

細說jQuery如何實現懶加載

Paste_Image.png

以上是細說jQuery如何實現懶加載的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!