圖片懶加載

時間 2019-11-12

標籤圖片加載简体版

原文原文鏈接

1、什麼是懶加載技術？html

定義：這張圖片很懶，喜歡臨時抱佛腳，都到了出如今屏幕視線範圍內了才加載。不過懶人有懶福，這樣能夠在那種有大量圖片須要展現的網站上優化性能，減輕瀏覽器壓力，畢竟你要瀏覽器一次加載一兩百張圖片也很累瀏覽器

2、爲什要使用這個技術？服務器

這樣作能防止頁面一次性向服務器發送大量請求，致使服務器響應慢，頁面卡頓崩潰等。好比一個頁面中有不少圖片，如淘寶、京東首頁等等，若是一上來就發送這麼多請求，頁面加載就會很漫長，若是js文件都放在了文檔的底部，恰巧頁面的頭部又依賴這個js文件，那就很差辦了。更爲要命的是：一上來就發送百八十個請求，服務器可能就吃不消了（又不是隻有一兩我的在訪問這個頁面）。所以優勢就很明顯了：不只能夠減輕服務器的壓力，並且可讓加載好的頁面更快地呈如今用戶面前（用戶體驗好）。

3、怎麼實現？app

原理：先將img標籤的src連接設爲同一張圖片（好比空白圖片），先把圖片地址存儲在一個臨時屬性上，而後將真正的圖片地址存儲在data-src中，當用瀏覽器的onscroll事件監聽到該圖片元素進入可視窗口時，將自定義屬性中的地址存儲到src屬性中，達到懶加載的效果。工具

判斷條件
window.innerHeight 能夠獲取到這個窗口的高度(不包括工具欄和滾動條)。getBoundingClientRect()方法用來獲取頁面中某個元素的左、上、右、下分別相對瀏覽器視窗的位置，返回的是一個矩形對象，包括四個屬性，分別是left 、top、right、bottom。分別表示元素各邊與頁面上邊和左邊的距離。
基本的判斷就是若是該圖片距離窗口上方的位置小於窗口的高度（也就是說該圖片已經進入了窗口），那麼就將該圖片的src屬性賦爲data-src找那個存的圖片路徑。
而後全局綁定scroll事件，在滾動頁面的時候，圖片進入到窗口後，500ms以後纔會顯示出圖片。性能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>懶加載</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    li {
      list-style: none;
      height: 600px;
      box-sizing: border-box;
      border: 1px solid black;
    }
    img {
      display: block;
      margin: 100px auto;
    }
  </style>
</head>
<body>
<div id="box">
  <ul>
    <li>
      <img data-src="./圖片懶加載/1.jpg" alt="">
    </li>
    <li>
      <img data-src="./圖片懶加載/2.jpg" alt="">
    </li>
    <li>
      <img data-src="./圖片懶加載/3.jpg" alt="">
    </li>
    <li>
      <img data-src="./圖片懶加載/4.jpg" alt="">
    </li>
    <li>
      <img data-src="./圖片懶加載/5.jpg" alt="">
    </li>
    <li>
      <img data-src="./圖片懶加載/6.jpg" alt="">
    </li>
    <li>
      <img data-src="./圖片懶加載/7.jpg" alt="">
    </li>
    <li>
      <img data-src="./圖片懶加載/8.jpg" alt="">
    </li>
    <li>
      <img data-src="./圖片懶加載/9.jpg" alt="">
    </li>
    <li>
      <img data-src="./圖片懶加載/10.jpg" alt="">
    </li>
  </ul>
</div>
</body>
</html>

<script>
  function imgonload() {
    let img = document.querySelectorAll("img");
    /*console.log(img);*/
    for(let i=0; i<img.length; i++) {
      if(img[i].getBoundingClientRect().top < window.innerHeight) {
        //圖片一旦有src就會加載出來，因此圖片的路徑不會放在src中，而是一個自定義的屬性data-src中
        img[i].src = img[i].dataset.src;
      }
    }
  }

  function scollImg(fn) {
    let timer = null;
    let context = this;
    return function () {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(context);
      }, 500)
    }
  }
  window.onload = imgonload;
  window.onscroll = scollImg(imgonload);
</script>
————————————————

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。