由於小說APP原始碼中會涉及很多的圖片載入，在開啟程式時，如果一次性將首頁圖片全部載入出來不僅會消耗大量的流量，甚至還會增加首頁開啟的延遲，影響到使用者的體驗，因此在小說APP原始碼開發中，我們經常會用懶載入和預載入的方式進行圖片的載入。

圖片懶載入

什麼是圖片懶載入

圖片懶載入又叫圖片延遲（按需）載入
在需要的時候載入圖片
更好的載入小說APP原始碼頁面的首屏內容，無需考慮整個頁面

圖片懶載入的實現

<!DOCTYPE html><html lang="en">
  <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>圖片懶載入</title>
      <style>
          * {
              padding: 0;
              margin: 0;
          }
          img {
              width: 100%;
              height: 183px;
          }
      </style>
    </head>
    <body>
    <div class="img-container">
      <img
        src="./images/loading.gif"
        alt=""
        data-src="./images/1.jpg"
        class="lazyload"
      />
    </div>
    <div class="img-container">
      <img
        src="./images/loading.gif"
        alt=""
        data-src="./images/2.jpg"
        class="lazyload"
      />
    </div>
    <div class="img-container">
      <img
        src="./images/loading.gif"
        alt=""
        data-src="./images/3.jpg"
        class="lazyload"
      />
    </div>
    <div class="img-container">
      <img
        src="./images/loading.gif"
        alt=""
        data-src="./images/4.jpg"
        class="lazyload"
      />
    </div>
    <div class="img-container">
      <img
        src="./images/loading.gif"
        alt=""
        data-src="./images/5.jpg"
        class="lazyload"
      />
    </div>
    <script>
      // 圖片要設定高度
      const imgs = [...document.querySelectorAll(".lazyload")];
      lazyload();
      window.addEventListener('scroll', lazyload, false);
     
      function lazyload() {
        for (let i = 0; i < imgs.length; i++) {
          const $img = imgs[i];
          if (isInVisibleArea($img)) {
            $img.src = $img.dataset.src;
            imgs.splice(i, 1);
            i--;
          }
        }
      }
      // DOM 元素是否在可視區域內
      function isInVisibleArea($el) {
        const rect = $el.getBoundingClientRect();
        // console.log(rect);
        return (
          rect.bottom > 0 &&
          rect.top < window.innerHeight &&
          rect.right > 0 &&
          rect.left < window.innerWidth        );
      }
     
    </script>
  </body></html>

加上防抖和節流進行效能優化試試

 window.addEventListener("scroll", debounce(lazyload), false);// 不適用// window.addEventListener('scroll', throttle(lazyload), false);// 防抖 debounce// 在某個時間期限內，事件處理函式只執行一次function debounce(fn, miliseconds = 250, context) {
    let timer = null;
    return function (...args) {
        const self = context || this;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            fn.apply(self, args);
            timer = null;
        }, miliseconds);
    };}// 節流 throttle// 事件處理函式執行一次後，在某個時間期限內不再工作function throttle(fn, miliseconds = 250, context) {
    let lastEventTimestamp = null;
    return function (...args) {
        const self = context || this;
        const now = Date.now();
        if (!lastEventTimestamp || now - lastEventTimestamp >= miliseconds) {
            lastEventTimestamp = now;
            fn.apply(self, args);
        }
    };}

圖片預載入

什麼是圖片預載入

提前載入將來可能會用到的圖片

圖片預載入的實現

<!DOCTYPE html><html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>圖片預載入</title>
    <style>
      .img-container {
        display: flex;
        align-items: center;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
      }
      img {
        width: 100%;
      }
      * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div class="img-container">
      <img src="./images/1.jpg" alt="圖片" id="img" />
    </div>
    <script>
      const imgs = [
        './images/2.jpg',
        './images/3.jpg',
        './images/4.jpg',
        './images/5.jpg'
      ];
      let i = 0;
      const $img = document.getElementById('img');
		
      // 頁面一開始呼叫preload載入陣列的第一個元素
      preload(imgs[i])
        .then(data => {})
        .catch(() => {});
      // 點選切換
      $img.addEventListener(
        'click',
        () => {
          // 當索引小於陣列length
          if (i < imgs.length) {
            // 將陣列元素的src賦值給頁面元素
            $img.src = imgs[i];
            // i+1 下次點選變為陣列的第二個元素 依次遞增
            i++;
			   // 當索引小於陣列length
            if (i < imgs.length) {
              // 預載入下一個圖片
              preload(imgs[i]);
            }
          } else {
            // 當 索引和 陣列length相同 則陣列內沒元素了
            console.log('已經是最後一張了！');
          }
        },
        false
      );
      // 預載入
      function preload(src) {
        // Promise進行包裝
        return new Promise((resolve, reject) => {
          // 建立一個新的圖片標籤
          const image = new Image();
			
          // 圖片載入完成呼叫成功狀態
          image.addEventListener('load', () => resolve(image), false);
          // 圖片載入失敗呼叫失敗狀態
          image.addEventListener('error', () => reject, false);
			// 將傳進來的src賦值給新的圖片
          image.src = src;
        });
      }
    </script>
  </body></html>

以上便是“小說APP原始碼的圖片載入方式，懶載入和預載入的實現”的全部內容，選擇合適的圖片載入方式才能實現使用者體驗的優化，希望能對大家開發小說APP原始碼帶來幫助。

本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理
原文連結：

小說APP原始碼的圖片載入方式，懶載入和預載入的實現

圖片懶載入

圖片預載入

相關文章