快捷導(dǎo)航

js實(shí)現(xiàn)首屏延遲加載實(shí)現(xiàn)方法 js實(shí)現(xiàn)多屏單張圖片延遲加載效果

更新時(shí)間：2017年07月17日 17:14:07 作者：diasa

這篇文章主要介紹了js實(shí)現(xiàn)首屏延遲加載實(shí)現(xiàn)方法，以及js實(shí)現(xiàn)多屏單張圖片延遲加載效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文為大家分享了js實(shí)現(xiàn)延遲加載思想和首屏延遲加載的具體代碼，供大家參考，具體內(nèi)容如下

作用:保證頁面打開的速度（3s之內(nèi)如果首頁打不開就已經(jīng)算是死亡頁面了）

原理:

　　1）、對于首屏內(nèi)容中的圖片:首先給對應(yīng)的區(qū)域一張默認(rèn)圖片占的位置（默認(rèn)圖需要非常的小，一般可以維持在5kb以內(nèi)），當(dāng)首屏內(nèi)容都加載完成后（或者也可以給一個(gè)延遲的時(shí)間），我在開始加載真實(shí)的圖片

　　2）、對于其他屏中的圖片：也是給一張默認(rèn)的圖片占位，當(dāng)滾動條滾動到對應(yīng)區(qū)域的時(shí)候，我們再開始加載真實(shí)的圖片

　　擴(kuò)展：數(shù)據(jù)的異步加載，開始只把前兩屏的數(shù)據(jù)加載綁定出來，后面的數(shù)據(jù)不進(jìn)行處理，當(dāng)頁面滾動到對應(yīng)區(qū)域的時(shí)候，在重新請求數(shù)據(jù)綁定渲染數(shù)據(jù)

具體可以看一下下圖

首屏的延遲加載代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      padding:0;
      margin:0;
      font-size:14px;
    }
    #banner{
      margin:10px auto;
      width:300px;
      height:150px;
      border:1px solid green;
      background:url('img/default.gif') no-repeat center center;/*給當(dāng)前的區(qū)域加一個(gè)默認(rèn)圖占位，告訴用戶此處的圖片正在加載中*/
    }
    #banner img{
      display:none;/*在開始的時(shí)候IMG的SRC屬性沒有地址，這樣的話在IE瀏覽器中會顯示一張碎圖，不美觀，所以我們讓其默認(rèn)是隱藏的，當(dāng)真實(shí)的圖片加載完成后在顯示*/
      width:100%;
      height:100%;
    }
  </style>
</head>
<body>
  <div id='banner'>
    <!--trueImg是當(dāng)前標(biāo)簽的自定義屬性，存儲的是真實(shí)圖片的地址-->
    <img src="" alt="" trueImg="img/jd.jpg">
  </div>
  <script>
    var banner = document.getElementById('banner'),imgFir = banner.getElementsByTagName('img')[0]
    window.setTimeout(function(){
      // imgFir.src = imgFir.getAttribute('trueImg');
      // imgFir.style.display = "block"
      //以上處理還是不完整的：如果我們獲取的真實(shí)圖片的地址是錯(cuò)誤的，賦值給IMG的SRC屬性的時(shí)候，不僅控制臺會報(bào)錯(cuò)，而且頁面中還會出現(xiàn)碎圖
      //獲取圖片的地址，驗(yàn)證地址的有效性，是有效的才賦值，不是有效的是不進(jìn)行處理的
      // var oImg = document.createElement('img')
      var oImg = new Image;//創(chuàng)建一個(gè)臨時(shí)的IMG標(biāo)簽
      oImg.src = imgFir.getAttribute('trueImg');
      oImg.onload = function(){//當(dāng)圖片能夠正常加載
        imgFir.src = this.src;
        imgFir.style.display = "block";
        oImg = null
        console.log('加載完成')
      }
      console.log('正在加載中...')
    },500)
  </script>
</body>
</html>

多屏單張圖片的延遲加載

具體代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      padding:0;
      margin:0;
      font-size:14px;
    }
    #banner{
      margin:10px auto;
      width:300px;
      height:150px;
      border:1px solid green;
      background:url('img/default.gif') no-repeat center center;/*給當(dāng)前的區(qū)域加一個(gè)默認(rèn)圖占位，告訴用戶此處的圖片正在加載中*/
    }
    #banner img{
      display:none;/*在開始的時(shí)候IMG的SRC屬性沒有地址，這樣的話在IE瀏覽器中會顯示一張碎圖，不美觀，所以我們讓其默認(rèn)是隱藏的，當(dāng)真實(shí)的圖片加載完成后在顯示*/
      width:100%;
      height:100%;
    }
  </style>
</head>
<body>
  <div id='banner'>
    <!--trueImg是當(dāng)前標(biāo)簽的自定義屬性，存儲的是真實(shí)圖片的地址-->
    <img src="" alt="" trueImg="img/jd.jpg">
  </div>
  <script>
    var banner = document.getElementById('banner'),imgFir = banner.getElementsByTagName('img')[0]

    window.onscroll = function(){
      if(banner.isLoad){
        return;
      }
      var A = banner.offsetHeight+utils.offset(banner).top;
      var B = utils.win("clientHeight") + utils.win("scrollTop");
      if(A<B){
        //當(dāng)條件成立，我們加載真實(shí)的圖片，第一次加載完成后，我們在讓頁面滾動的過程中A<B一直成立，又重新執(zhí)行下面的操作，導(dǎo)致了重復(fù)給一個(gè)容器中的圖片進(jìn)行加載
        var oImg = new Image;
        oImg.src = imgFir.getAttribute('trueImg');
        oImg.onload = function(){
          imgFir.src = this.src;
          imgFir.style.display = 'block';
          oImg = null;
          
        }
        banner.isLoad = true;//設(shè)置一個(gè)自定義屬性告訴瀏覽器我已經(jīng)把圖片加載完了(不管是否正常的加載，只要處理過一次以后都不需要處理了)

      }
    }
  </script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: