懶載入

一、懶載入的概念

  • 概念：懶載入也叫做延遲載入、按需載入，指的是在長網頁中延遲載入圖片數據，是一種較好的網頁性能優化的方式。在比較長的網頁或應用中，如果圖片很多，所有的圖片都被載入出來，而用戶只能看到可視窗口的那一部分圖片數據，這樣就浪費了性能。如果使用圖片的懶載入就可以解決以上問題。在滾動螢幕之前，可視化區域之外的圖片不會進行載入，在滾動螢幕時才載入。這樣使得網頁的載入速度更快，減少了伺服器的負載。懶載入適用於圖片較多，頁面列表較長（長列表）的場景中。

二、懶載入的特點

  • 減少無用資源的載入
    • 使用懶載入明顯減少了伺服器的壓力和流量，同時也減小了瀏覽器的負擔。
  • 提升用戶體驗
    • 如果同時載入較多圖片，可能需要等待的時間較長，這樣影響了用戶體驗，而使用懶載入就能大大的提高用戶體驗。
  • 防止載入過多圖片而影響其他資源文件的載入
    • 載入過多圖片可能會影響網站應用的正常使用。

三、懶載入的實現原理

​

  • 圖片的載入是由src引起的，當對src賦值時，瀏覽器就會請求圖片資源。根據這個原理，我們使用HTML5 的data-xxx屬性來儲存圖片的路徑，在需要載入圖片的時候，將data-xxx中圖片的路徑賦值給src，這樣就實現了圖片的按需載入，即懶載入。

  • 懶載入的實現重點在於確定用戶需要載入哪張圖片，在瀏覽器中，可視區域內的資源就是用戶需要的資源。所以當圖片出現在可視區域時，獲取圖片的真實地址並賦值給圖片即可。

  • 使用原生JavaScript實現懶載入

    • window.innerHeight 是瀏覽器可視區的高度

    • document.body.scrollTop || document.documentElement.scrollTop 是瀏覽器滾動的過的距離

    • imgs.offsetTop 是元素頂部距離文檔頂部的高度（包括滾動條的距離）

    • 圖片載入條件：img.offsetTop < window.innerHeight + document.body.scrollTop

      <div class="container">
	<img src="loading.gif" data-src="pic.png">
	<img src="loading.gif" data-src="pic.png">
	<img src="loading.gif" data-src="pic.png">
	<img src="loading.gif" data-src="pic.png">
	<img src="loading.gif" data-src="pic.png">
<div>
<script>
    // 獲取全部的圖片元素
    let imgs = document.querySelectorAll('img')
    function lazyLoad () {
        // 獲取瀏覽器滾動的過的距離
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop
        // 獲取瀏覽器可視區的高度
        var winHeight = window.innerHeight
        for (let i = 0; i < imgs.length; i++) {
            // 判斷是否滿足圖片載入條件
            if (imgs[i].offsetTop < scrollTop + winHeight) {
                imgs[i].src = imgs[i].getAttribute('data-src')
            }
        }
    }
    window.onscroll = lazyLoad()
</script>

四、懶載入與預載入的區別

  • 這兩種方式都是提高網頁性能的方式，兩者主要區別是一個是提前載入，一個是遲緩甚至不載入。懶載入對伺服器前端有一定的緩解壓力作用，預載入則會增加伺服器前端壓力。
  • 懶載入：
    • 懶載入也叫延遲載入，指的是在長網頁中延遲載入圖片的時機，當用戶需要訪問時，再去載入，這樣可以提高網站的首屏載入速度，提升用戶的體驗，並且可以減少伺服器的壓力。它適用於圖片很多，頁面很長的電商網站的場景。懶載入的實現原理是，將頁面上的圖片的 src 屬性設置為空字元串，將圖片的真實路徑保存在一個自定義屬性中，當頁面滾動的時候，進行判斷，如果圖片進入頁面可視區域內，則從自定義屬性中取出真實路徑賦值給圖片的 src 屬性，以此來實現圖片的延遲載入。
  • 預載入：
    • 預載入指的是將所需的資源提前請求載入到本地，這樣後面在需要用到時就直接從快取取資源。通過預載入能夠減少用戶的等待時間，提高用戶的體驗。我了解的預載入的最常用的方式是使用 js 中的 image 對象，通過為 image 對象來設置 src屬性，來實現圖片的預載入。
Tags:

VirMach 便宜 VPS