圖片懶載入 與 下拉載入更新資料

王大膽同學發表於2017-11-21

懶載入應該是現在網站提高效能常用的的方法之一，小白們可能會想，嗯，我知道，或者我看過，就是動手操作少，沒錯我就是這樣的小白，在網上看過千遍萬遍不如動手操練一遍，所以在我操練之後大概來個小總結，哈哈哈見笑了(有錯誤希望大家及時指出)

首先先說說懶載入和預先載入的區別哈

懶載入：就是需要資料的的時候在載入，不用的時候我不載入

預載入：就是提前把 資料載入好

拿圖片懶載入為例哈：

第一步：首先你需要獲取所有img標籤

var aImg = document.querySelectorAll('img');

第二步：獲取地理位置資訊

var scrollT = $(window).scrollTop();

var winH = $(window).height();

如果當前圖片到文件頂部的距離當前瀏覽器的高度+滾動條距離頂部的距離，我們就載入圖片
說到載入圖片我們首先把圖片的地址存在data-src中，載入的時候把data-src的屬性賦值給src

  if (aImg[i].offsetTop < scrollT + winH) {
       aImg[i].src = aImg[i].getAttribute('data-src');
 }複製程式碼

那就是這樣 

    function loadImg() {
        var scrollT = $(window).scrollTop();
        var winH = $(window).height();
        var aImg = document.querySelectorAll('img');
        var len = aImg.length;
        for (var i = 0; i < len; i++) {
            if (aImg[i].offsetTop < scrollT + winH) {
                aImg[i].src = aImg[i].getAttribute('data-src');
            }
        }
    }複製程式碼

如果想實現下拉，載入介面下一頁的資料，可以下面的方法實現
var URL = 'moubao.com/goods?page=…'
題外：下拉載入下一頁的資料

    function loadPage() {
        var n = 0;
        var len = vm.array.length;
        var pageH = $(document.body).height();
        var scrollT = $(window).scrollTop();
        var winH = $(window).height();
        var aa = (pageH - winH - scrollT) / winH;
        if (aa < 0.5) {
            getData(i);
        }
        flag = false;
    }

     注：getData()函式
     function getData(pagenumber){
     i++
     $.ajax({
          type: 'get',
          url: URL,
          data: { page: pagenumber, size: gPageSize },
          dataType: 'json',
          success: function(ajaxData) {
              console.log(ajaxData);
          },
      });
    }複製程式碼

不過在呼叫loadImg()的時候，別直接寫loading（），放在例如
$('window').scroll(functin(){
loagImg();
loadPage();
});
因為，兩個函式都要實時獲取到

$(document.body).height();
$(window).scrollTop();
$(window).height();

的值
所以大概這樣吧，我在做公司的新人專案，就把其中的一些東西做一些小的總結，如果有寫的不好的地方，歡迎大家指出……^_^

相關文章