• 懶載入

1.什麼是懶載入？

懶載入也就是延遲載入。
當訪問一個頁面的時候，先把img元素或是其他元素的背景圖片路徑替換成一張大小為1*1px圖片的路徑（這樣就只需請求一次，俗稱佔位圖），只有當圖片出現在瀏覽器的可視區域內時，才設定圖片正真的路徑，讓圖片顯示出來。這就是圖片懶載入。

2.為什麼要使用懶載入？

很多頁面，內容很豐富，頁面很長，圖片較多。比如說各種商城頁面。這些頁面圖片數量多，而且比較大，少說百來K，多則上兆。要是頁面載入就一次性載入完畢。估計大家都會等到黃花變成黃花菜了。

3.懶載入的原理是什麼？

頁面中的img元素，如果沒有src屬性，瀏覽器就不會發出請求去下載圖片，只有通過javascript設定了圖片路徑，瀏覽器才會傳送請求。
懶載入的原理就是先在頁面中把所有的圖片統一使用一張佔位圖進行佔位，把正真的路徑存在元素的“data-url”（這個名字起個自己認識好記的就行）屬性裡，要用的時候就取出來，再設定；

4.懶載入的實現步驟？

1)首先，不要將圖片地址放到src屬性中，而是放到其它屬性(data-original)中。
2)頁面載入完成後，根據scrollTop判斷圖片是否在使用者的視野內，如果在，則將data-original屬性中的值取出存放到src屬性中。
3)在滾動事件中重複判斷圖片是否進入視野，如果進入，則將data-original屬性中的值取出存放到src屬性中。

5.懶載入的優點是什麼？

頁面載入速度快、可以減輕伺服器的壓力、節約了流量,使用者體驗好

//懶載入程式碼實現
var viewHeight = document.documentElement.clientHeight // 可視區域的高度
 


function lazyload () {
  // 獲取所有要進行懶載入的圖片
  var eles = document.querySelectorAll('img[data-original][lazyload]')
  Array.prototype.forEach.call(eles, function (item, index) {
    var rect
    if (item.dataset.original === '')
      return
    rect = item.getBoundingClientRect()
    // 圖片一進入可視區，動態載入
    if
 
 (rect.bottom >= 0 && rect.top < viewHeight) {
      !function () {
        var img = new Image()
        img.src = item.dataset.original
        img.onload = function () {
          item.src = img.src
        }
        item.removeAttribute('data-original')
        item.removeAttribute('lazyload')
      }()
    }
  })
}
// 首屏要人為的呼叫，否則剛進入頁面不顯示圖片
lazyload()

document.addEventListener('scroll', lazyload)

• 預載入

預載入的核心要點如下：

1.圖片等靜態資源在使用之前的提前請求；

2.資源後續使用時可以從快取中載入，提升使用者體驗；

3.頁面展示的依賴關係維護（必需的資源載入完才可以展示頁面，防止白屏等）；

實現預載入主要有三個方法：

1.html中img標籤最初設定為display:none；

2.js指令碼中使用image物件動態建立好圖片；

3.使用XMLHttpRequest物件可以更加精細的控制預載入過程，缺點是無法跨域：

1.什麼是預載入？

提前載入圖片，當用戶需要檢視時可直接從本地快取中渲染

2.為什麼要使用預載入？

圖片預先載入到瀏覽器中，訪問者便可順利地在你的網站上衝浪，並享受到極快的載入速度。這對圖片畫廊及圖片佔據很大比例的網站來說十分有利，它保證了圖片快速、無縫地釋出，也可幫助使用者在瀏覽你網站內容時獲得更好的使用者體驗。

3.實現預載入的方法有哪些？

方法一：用CSS和JavaScript實現預載入
方法二：僅使用JavaScript實現預載入
方法三：使用Ajax實現預載入

3、懶載入和預載入的對比

1)概念：
懶載入也叫延遲載入：JS圖片延遲載入,延遲載入圖片或符合某些條件時才載入某些圖片。
預載入：提前載入圖片，當用戶需要檢視時可直接從本地快取中渲染。

2)區別：
兩種技術的本質：兩者的行為是相反的，一個是提前載入，一個是遲緩甚至不載入。懶載入對伺服器前端有一定的緩解壓力作用，預載入則會增加伺服器前端壓力。

3)懶載入的意義及實現方式有：
意義：
懶載入的主要目的是作為伺服器前端的優化，減少請求數或延遲請求數。
實現方式：
1.第一種是純粹的延遲載入，使用setTimeOut或setInterval進行載入延遲.
2.第二種是條件載入，符合某些條件，或觸發了某些事件才開始非同步下載。
3.第三種是可視區載入，即僅載入使用者可以看到的區域，這個主要由監控滾動條來實現，一般會在距使用者看到某圖片前一定距離遍開始載入，這樣能保證使用者拉下時正好能看到圖片。

4)預載入的意義及實現方式有：
意義:
預載入可以說是犧牲伺服器前端效能，換取更好的使用者體驗，這樣可以使使用者的操作得到最快的反映。
實現方式：
實現預載的方法非常多，比如：用CSS和JavaScript實現預載入；僅使用JavaScript實現預載入；使用Ajax實現預載入。
常用的是new Image();設定其src來實現預載，再使用onload方法回撥預載完成事件。只要瀏覽器把圖片下載到本地，同樣的src就會使用快取，這是最基本也是最實用的預載方法。當Image下載完圖片頭後，會得到寬和高，因此可以在預載前得到圖片的大小(方法是用記時器輪循寬高變化)。

4、補充知識

螢幕可視視窗大小

  原生方法： 

        window.innerHeight 標準瀏覽器及IE9+ || 

        document.documentElement.clientHeight 標準瀏覽器及低版本IE標準模式 || 

        document.body.clientHeight  低版本混雜模式 

    jQuery方法：  

        $(window).height();

瀏覽器視窗頂部與文件頂部之間的距離，也就是滾動條滾動的距離：

 原生方法： 

          window.pagYoffset 標準瀏覽器及IE9+ || 

          document.documentElement.scrollTop 相容ie低版本的標準模式 || 

          document.body.scrollTop 相容混雜模式； 

    jQuery方法： 

          $(document).scrollTop();

獲取元素的尺寸

$(o).width() = o.style.width;
$(o).innerWidth() = o.style.width+o.style.padding;
$(o).outerWidth() = o.offsetWidth = o.style.width+o.style.padding+o.style.border；
$(o).outerWidth(true) = o.style.width+o.style.padding+o.style.border+o.style.margin；

注意
要使用原生的style.xxx方法獲取屬性，這個元素必須已經有內嵌的樣式，如

如果原先是通過外部或內部樣式表定義css樣式，必須使用o.currentStyle[xxx] || document.defaultView.getComputedStyle(0)[xxx]來獲取樣式值。

獲取元素的位置資訊

jQuery：
$(o).offset().top</code>元素距離文件頂的距離<br><code>$(o).offset().left元素距離文件左邊緣的距離。
原生：getoffsetTop();
順便提一下返回元素相對於第一個以定位的父元素的偏移距離，注意與上面偏移距的區別；
jQuery：position()返回一個物件
$(o).position().left = o.style.left;</code><br><code>$(o).position().top = o.style.top；