摘要：原文地址原生實現(xiàn)最簡單的圖片懶加載歡迎。什么時候用懶加載當頁面中需要一次性載入很多圖片的時候，往往都是需要用懶加載的。屬性是一個必需的屬性，它規(guī)定在圖像無法顯示時的替代文本。假設來表示圖片到可視區(qū)域頂部距離并設來表示可視區(qū)域的高度。

原文地址：原生JS實現(xiàn)最簡單的圖片懶加載

歡迎star。

如果有錯誤的地方歡迎指正。

Demo地址：http://axuebin.com/lazyload

照片都是自己拍的哦~

懶加載其實就是延遲加載，是一種對網(wǎng)頁性能優(yōu)化的方式，比如當訪問一個頁面的時候，優(yōu)先顯示可視區(qū)域的圖片而不一次性加載所有圖片，當需要顯示的時候再發(fā)送圖片請求，避免打開網(wǎng)頁時加載過多資源。

當頁面中需要一次性載入很多圖片的時候，往往都是需要用懶加載的。

我們都知道HTML中的標簽是代表文檔中的一個圖像。。說了個廢話。。

標簽有一個屬性是src，用來表示圖像的URL，當這個屬性的值不為空時，瀏覽器就會根據(jù)這個值發(fā)送請求。如果沒有src屬性，就不會發(fā)送請求。

嗯？貌似這點可以利用一下？

我先不設置src，需要的時候再設置？

nice，就是這樣。

我們先不給設置src，把圖片真正的URL放在另一個屬性data-src中，在需要的時候也就是圖片進入可視區(qū)域的之前，將URL取出放到src中。

仔細觀察一下，標簽此時是沒有src屬性的，只有alt和data-src屬性。

alt 屬性是一個必需的屬性，它規(guī)定在圖像無法顯示時的替代文本。
data-* 全局屬性：構成一類名稱為自定義數(shù)據(jù)屬性的屬性，可以通過HTMLElement.dataset來訪問。

網(wǎng)上看到好多這種方法，稍微記錄一下。

通過document.documentElement.clientHeight獲取屏幕可視窗口高度

通過element.offsetTop獲取元素相對于文檔頂部的距離

通過document.documentElement.scrollTop獲取瀏覽器窗口頂部與文檔頂部之間的距離，也就是滾動條滾動的距離

然后判斷②-③<①是否成立，如果成立，元素就在可視區(qū)域內(nèi)。

通過getBoundingClientRect()方法來獲取元素的大小以及位置，MDN上是這樣描述的：

The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.

這個方法返回一個名為ClientRect的DOMRect對象，包含了top、right、botton、left、width、height這些值。

MDN上有這樣一張圖：

可以看出返回的元素位置是相對于左上角而言的，而不是邊距。

我們思考一下，什么情況下圖片進入可視區(qū)域。

假設const bound = el.getBoundingClientRect();來表示圖片到可視區(qū)域頂部距離；
并設 const clientHeight = window.innerHeight;來表示可視區(qū)域的高度。

隨著滾動條的向下滾動，bound.top會越來越小，也就是圖片到可視區(qū)域頂部的距離越來越小，當bound.top===clientHeight時，圖片的上沿應該是位于可視區(qū)域下沿的位置的臨界點，再滾動一點點，圖片就會進入可視區(qū)域。

也就是說，在bound.top<=clientHeight時，圖片是在可視區(qū)域內(nèi)的。

我們這樣判斷：

function isInSight(el) {
  const bound = el.getBoundingClientRect();
  const clientHeight = window.innerHeight;
  //如果只考慮向下滾動加載
  //const clientWidth = window.innerWeight;
  return bound.top <= clientHeight + 100;
}

這里有個+100是為了提前加載。

經(jīng)提醒。。這個方法性能

頁面打開時需要對所有圖片進行檢查，是否在可視區(qū)域內(nèi)，如果是就加載。

function checkImgs() {
  const imgs = document.querySelectorAll(".my-photo");
  Array.from(imgs).forEach(el => {
    if (isInSight(el)) {
      loadImg(el);
    }
  })
}

function loadImg(el) {
  if (!el.src) {
    const source = el.dataset.src;
    el.src = source;
  }
}

這里應該是有一個優(yōu)化的地方，設一個標識符標識已經(jīng)加載圖片的index，當滾動條滾動時就不需要遍歷所有的圖片，只需要遍歷未加載的圖片即可。

在類似于滾動條滾動等頻繁的DOM操作時，總會提到“函數(shù)節(jié)流、函數(shù)去抖”。

所謂的函數(shù)節(jié)流，也就是讓一個函數(shù)不要執(zhí)行的太頻繁，減少一些過快的調(diào)用來節(jié)流。

基本步驟：

獲取第一次觸發(fā)事件的時間戳

獲取第二次觸發(fā)事件的時間戳

時間差如果大于某個閾值就執(zhí)行事件，然后重置第一個時間

function throttle(fn, mustRun = 500) {
  const timer = null;
  let previous = null;
  return function() {
    const now = new Date();
    const context = this;
    const args = arguments;
    if (!previous){
      previous = now;
    }
    const remaining = now - previous;
    if (mustRun && remaining >= mustRun) {
      fn.apply(context, args);
      previous = now;
    }
  }
}

這里的mustRun就是調(diào)用函數(shù)的時間間隔，無論多么頻繁的調(diào)用fn，只有remaining>=mustRun時fn才能被執(zhí)行。

可以看出此時僅僅是加載了img1和img2，其它的img都沒發(fā)送請求，看看此時的瀏覽器

第一張圖片是完整的呈現(xiàn)了，第二張圖片剛進入可視區(qū)域，后面的就看不到了~

當我向下滾動，此時瀏覽器是這樣

此時第二張圖片完全顯示了，而第三張圖片顯示了一點點，這時候我們看看請求情況

img3的請求發(fā)出來，而后面的請求還是沒發(fā)出~

當滾動條滾到最底下時，全部請求都應該是發(fā)出的，如圖

在這哦：http://axuebin.com/lazyload

原文地址：http://axuebin.com/blog/2017/...

經(jīng)大佬提醒，發(fā)現(xiàn)了這個方法

先附上鏈接：

jjc大大：https://github.com/justjavac/the-front-end-knowledge-you-may-dont-know/issues/10

阮一峰大大：http://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html

API Sketch for Intersection Observers：https://github.com/WICG/IntersectionObserver

IntersectionObserver可以自動觀察元素是否在視口內(nèi)。

var io = new IntersectionObserver(callback, option);
// 開始觀察
io.observe(document.getElementById("example"));
// 停止觀察
io.unobserve(element);
// 關閉觀察器
io.disconnect();

callback的參數(shù)是一個數(shù)組，每個數(shù)組都是一個IntersectionObserverEntry對象，包括以下屬性：

我們需要用到intersectionRatio來判斷是否在可視區(qū)域內(nèi)，當intersectionRatio > 0 && intersectionRatio <= 1即在可視區(qū)域內(nèi)。

function checkImgs() {
  const imgs = Array.from(document.querySelectorAll(".my-photo"));
  imgs.forEach(item => io.observe(item));
}

function loadImg(el) {
  if (!el.src) {
    const source = el.dataset.src;
    el.src = source;
  }
}

const io = new IntersectionObserver(ioes => {
  ioes.forEach(ioe => {
    const el = ioe.target;
    const intersectionRatio = ioe.intersectionRatio;
    if (intersectionRatio > 0 && intersectionRatio <= 1) {
      loadImg(el);
    }
    el.onload = el.onerror = () => io.unobserve(el);
  });
});