基于純JS實(shí)現(xiàn)多張圖片的懶加載Lazy過程解析

更新時(shí)間：2019年10月14日 08:25:03 作者：彭勝光

這篇文章主要介紹了基于純JS實(shí)現(xiàn)多張圖片的懶加載Lazy過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

一、效果圖如下

上面的效果圖，效果需求如下

1、還沒加載圖片的時(shí)候，默認(rèn)顯示加載圖片背景圖

2、剛開始進(jìn)入頁(yè)面，自動(dòng)加載第一屏幕的圖片

3、下拉界面，當(dāng)一張圖片容器完全顯露出屏幕，即刻加載圖片，替換背景圖

4、加載圖片的時(shí)候，有漸進(jìn)顯示圖片效果

二、難點(diǎn)

1）如何Ajax請(qǐng)求數(shù)據(jù)

2）如何動(dòng)態(tài)將json數(shù)據(jù)綁定到html中。

3）如何通過對(duì)圖片的定位計(jì)算，觸發(fā)圖片懶加載機(jī)制

4）加分項(xiàng)，顯示圖片時(shí)有漸現(xiàn)的過渡動(dòng)畫

三、前期知識(shí)點(diǎn)

1）Ajax相關(guān)知識(shí)，XMLHttpRequest對(duì)象，所有現(xiàn)代的瀏覽器都支持此對(duì)象。

2）innerHTML，數(shù)據(jù)綁定使用字符串拼接的方式

3）HTML DOM getAttribute() 方法，返回自定屬性名的屬性值（主要是用于返回自定義屬性的屬性值）

4）圖片的 onload事件，當(dāng)圖片的src屬性的屬性值為正確（即能成功加載圖片），才能觸發(fā)圖片的onload事件

四、難點(diǎn)逐一攻破

1）如何Ajax請(qǐng)求數(shù)據(jù)

分四步走

// 1)首先創(chuàng)建一個(gè)Ajax對(duì)象
var xhr = new XMLHttpRequest;
// 2)打開我們需要請(qǐng)求的數(shù)據(jù)的那個(gè)文件地址
// URL地址后面加隨機(jī)數(shù)目的：清除每一次請(qǐng)求數(shù)據(jù)時(shí)候（get請(qǐng)求）產(chǎn)生的緩存
// 因?yàn)槊看卧L問的地址不一樣，樣瀏覽器就不會(huì)嘗試緩存來(lái)自服務(wù)器的響應(yīng)，讀取本地緩存的數(shù)據(jù)。
xhr.open('get', 'json/newsList.txt?' + Math.random(), false); // false代表同步
 // 3)監(jiān)聽請(qǐng)求的狀態(tài)
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
    var val = xhr.responseText;
    jsonData = utils.jsonParse(val);
  }
}
// 4)發(fā)送請(qǐng)求
xhr.send(null);

2）如何動(dòng)態(tài)將json數(shù)據(jù)綁定到html中。

字符串拼接的方式（數(shù)據(jù)綁定中最常用的方式），即通過使用innerHTML，對(duì)頁(yè)面元素進(jìn)行字符串拼接，再重新渲染到頁(yè)面中

var str = "";
if (jsonData) {
  for (var i = 0, len = jsonData.length; i < len; i++) {
    var curData = jsonData[i];
    str += '<li>';
    str += '<div><img src="" trueImg="' + curData["img"] + '"></div>';
    str += '<div><h2>' + curData["title"] + '</h2>';
    str += '<p>' + curData["desc"] + '</p>';
    str += '</div>';
    str += '</li></div>';
  }
  news.innerHTML += str;
} <strong> </strong>

優(yōu)勢(shì)：數(shù)據(jù)綁定最常用的方式，因?yàn)闉g覽器只需要渲染一次（所有模板引擎數(shù)據(jù)綁定的原理就是字符串拼接，vue、angular、jade、kTemplate.js等等）

事先把內(nèi)容拼接好，最后統(tǒng)一添加到頁(yè)面中，只引發(fā)一次回流

弊端：我們把新憑借的字符串添加到#ul1中，原有的三個(gè)li的鼠標(biāo)滑過效果都消失了（原來(lái)標(biāo)簽綁定的事件都消失了）
原來(lái)，oUl.innerHTML的作用是把原來(lái)的標(biāo)簽以字符串的方式取出，原來(lái)作為標(biāo)簽的時(shí)候，對(duì)應(yīng)事件綁定的東西已經(jīng)沒有了，然后進(jìn)行字符串拼接，

但是，拼接完成之后，還是字符串！最后再把字符串統(tǒng)一添加到頁(yè)面中，瀏覽器還需要把字符串渲染成為對(duì)應(yīng)的標(biāo)簽

3）如何通過對(duì)圖片的定位計(jì)算，觸發(fā)圖片懶加載機(jī)制（最關(guān)鍵點(diǎn)）

思路：

A：代表圖片距離屏幕頂部的距離

//這里使用了utils工具類中的offset方法，具體實(shí)現(xiàn)看下面源碼
var A = utils.offset(curImgPar).offsetTop + curImgPar.offsetHeight；

B：代表一屏幕距離+滾動(dòng)條滾動(dòng)距離

//這里使用了utils工具類中的win方法，具體實(shí)現(xiàn)看下面源碼
var B = utils.win("clientHeight") + utils.win("scrollTop");

當(dāng)A < B的時(shí)候，此時(shí)懶加載的默認(rèn)圖片才能完整顯示出來(lái)，這個(gè)時(shí)候就需要觸發(fā)圖片懶加載

4）加載圖片的時(shí)候，有漸進(jìn)顯示圖片效果

思路，利用window.setInterval 方法，通過對(duì)當(dāng)前圖片的透明度屬性（curImg.style.opacity）從透明0開始到透明度1，變化總時(shí)間為500ms即可

// ->實(shí)現(xiàn)漸現(xiàn)效果
function fadeIn(curImg) {
  var duration = 500, // 總時(shí)間
  interval = 10, //10ms走一次
  target = 1; //總距離是1
  var step = (target / duration) * interval; //每一步的步長(zhǎng)
  var timer = window.setInterval(function () {
    var curOp = utils.getCss2SS(curImg, "opacity");
    if (curOp >= 1) {
      curImg.style.opacity = 1;
      window.clearInterval(timer);
      return
    }
    curOp += step;
    curImg.style.opacity = curOp;
  }, interval);
}

五、完整代碼

1）main.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!--做移動(dòng)端響應(yīng)式布局頁(yè)面，都需要加下面的meta-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--meta:vp+tap一鍵生成-->
  <title>多張圖片的延遲加載</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
      font-family: "Microsoft Sans Serif";
      font-size: 14px;
    }
    ul, li {
      list-style: none;
    }
    img {
      display: block;
      border: none;
    }
    .news {
      padding: 10px;
    }
    .news li {
      position: relative;
      height: 60px;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
    }
    .news li > div:first-child {  /*意思是，li下面的子div，中的第一個(gè)*/
      position: absolute;
      top: 10px;
      left: 0;
      width: 75px;
      height: 60px;
      background: url("./img/loading.PNG") no-repeat center center #e1e1e1;
      background-size: 100% 100%;
    }
    /*移動(dòng)端布局，最外層容器是不設(shè)置寬高的*/
 
    .news li > div:first-child img {
      display: none;
      width: 100%;
      height: 100%;
      opacity: 0; /*這里設(shè)置為0的目的是，實(shí)現(xiàn)漸進(jìn)的效果，后面的fadeIn函數(shù)，作用就是讓圖片透明都從0變成1*/
    }
 
    .news li > div:nth-child(2) {
      height: 60px;
      margin-left: 80px;
    }
    .news li > div:nth-child(2) h2 {
      height: 20px;
      line-height: 20px;
      /*實(shí)現(xiàn)文字超出一行自動(dòng)裁切*/
      overflow: hidden;
      text-overflow: ellipsis; /*超出部分省略號(hào)顯示*/
      white-space: nowrap; /*強(qiáng)制不換行*/
    }
    .news li > div:nth-child(2) p {
      line-height: 20px;
      font-size: 12px;
      color: #616161;
    }
  </style>
</head>
<body>
  <ul id="news" class="news">
    <!--<li>-->
      <!--<div>-->
        <!--<img src="./img/new1.PNG" alt="">-->
      <!--</div>-->
      <!--<div>-->
        <!--<h2>香港四大家族往事,香港四大家族往事,香港四大家族往事</h2>-->
        <!--<p>香港四大家族往事：李嘉誠(chéng)為鄭裕彤扶靈香港四大家族往事：李嘉誠(chéng)為鄭裕彤扶靈</p>-->
      <!--</div>-->
    <!--</li>-->
  </ul>
 
 
 
 
<script type="text/javascript" src="./tool/utils.js"></script>
<script type="text/javascript">
  var news = document.getElementById("news"),
    imgList = news.getElementsByTagName("img");
 
  // 1、獲取需要綁定的數(shù)據(jù)(通過Ajax)
  var jsonData = null;
  ~function () {
    // 1)首先創(chuàng)建一個(gè)Ajax對(duì)象
    var xhr = new XMLHttpRequest;
    // 2)打開我們需要請(qǐng)求的數(shù)據(jù)的那個(gè)文件地址
    // URL地址后面加隨機(jī)數(shù)目的：清除每一次請(qǐng)求數(shù)據(jù)時(shí)候（get請(qǐng)求）產(chǎn)生的緩存
    // 因?yàn)槊看卧L問的地址不一樣，樣瀏覽器就不會(huì)嘗試緩存來(lái)自服務(wù)器的響應(yīng)，讀取本地緩存的數(shù)據(jù)。
    xhr.open('get', 'json/newsList.txt?' + Math.random(), false); // false代表同步
    // 3)監(jiān)聽請(qǐng)求的狀態(tài)
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
        var val = xhr.responseText;
        jsonData = utils.jsonParse(val);
      }
    }
    // 4)發(fā)送請(qǐng)求
    xhr.send(null);
  }();
  console.log(jsonData);
 
  // 2、數(shù)據(jù)綁定（使用字符串拼接的方式）
  ~function () {
    var str = "";
    if (jsonData) {
      for (var i = 0, len = jsonData.length; i < len; i++) {
        var curData = jsonData[i];
        str += '<li>';
        str += '<div><img src="" trueImg="' + curData["img"] + '"></div>';
        str += '<div><h2>' + curData["title"] + '</h2>';
        str += '<p>' + curData["desc"] + '</p>';
        str += '</div>';
        str += '</li></div>';
      }
      news.innerHTML += str;
    }
  }();
 
  // 3、圖片延遲加載
  // ->首先實(shí)現(xiàn)單張圖片的延時(shí)加載
  function lazyImg(curImg) {
    var oImg = new Image;
    oImg.src = curImg.getAttribute("trueImg");
    oImg.onload = function() {
      curImg.src = this.src;
      curImg.style.display = "block";
      fadeIn(curImg);
      oImg = null;
    }
    curImg.isLoad = true;
  }
 
  // -> 循環(huán)處理每一張圖片
  function handleAllImg() {
    for (var i = 0, len = imgList.length; i < len; i++) {
      var curImg = imgList[i];
      if (curImg.isLoad) { // 當(dāng)前圖片處理過的話，就不需重新進(jìn)行處理
        continue;
      }
 
      // ->只有當(dāng)A小于B的時(shí)候再進(jìn)行處理
//     var A = utils.offset(curImg).top + curImg.offsetHeight; // 這里A不能這么計(jì)算，因?yàn)榇藭r(shí)圖片是隱藏的，沒有圖片，他的offsetHeight當(dāng)讓也是為0
                                   // 如果我要的到圖片的A值，我們可以通過拿到他父節(jié)點(diǎn)的容器就行了，哈哈
      var curImgPar = curImg.parentNode,
        A = utils.offset(curImgPar).offsetTop + curImgPar.offsetHeight,
        B = utils.win("clientHeight") + utils.win("scrollTop");
      if (A < B) {
        lazyImg(curImg);
      }
    }
  }
 
  // ->實(shí)現(xiàn)漸現(xiàn)效果
  function fadeIn(curImg) {
    var duration = 500, // 總時(shí)間
      interval = 10, //10ms走一次
      target = 1; //總距離是1
    var step = (target / duration) * interval; //每一步的步長(zhǎng)
    var timer = window.setInterval(function () {
      var curOp = utils.getCss2SS(curImg, "opacity");
      if (curOp >= 1) {
         curImg.style.opacity = 1;
         window.clearInterval(timer);
         return
      }
      curOp += step;
      curImg.style.opacity = curOp;
    }, interval);
  }
 
  // 4、開始的時(shí)候（過500ms）加載1屏幕的圖片，當(dāng)滾動(dòng)條滾動(dòng)的時(shí)候，加載其他圖片
  window.setTimeout(handleAllImg, 500);
  window.onscroll = handleAllImg;
   
</script>
</body>
</html>

2）utils.js

// 為了與全局變量沖突，我們使用單例模式
var utils = {
 // jsonParse: 把JSON格式的字符串轉(zhuǎn)化為JSON格式的對(duì)象
 jsonParse: function (str) {
   var val = null;
    try {
     val = JSON.parse(str);
   } catch (e) {
     val = eval('(' + str + ')');
   }
   return val;
 },
 
 getCss2SS : function(curEle, attr) {
   var val = null, reg = null;
   if ('getComputedStyle' in window) {
     val = window.getComputedStyle(curEle, null)[attr];
   } else {
     if (attr === 'opacity') {
       val = curEle.currentStyle[attr]; // ->返回 alpha(opacity=10)
       reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i; // 獲取10這個(gè)數(shù)字
       val = reg.test(val)?reg.exec(val)[1]/100:1 // 超厲害，test與exec一起使用?。。?
     }
     val = curEle.currentStyle[attr];
   }
   reg = /^-?\d+(\.\d+)?(px|pt|rem|em)?$/i; //匹配的情況：純數(shù)值或者帶單位的數(shù)值
   return reg.test(val) ? parseFloat(val) : val;
 },
 
 offset : function(curEle) {
   var totalLeft = null,
     totalTop = null,
     par = curEle.offsetParent;
   // 首先把自己本身的進(jìn)行累加
   totalLeft += curEle.offsetLeft;
   totalTop += curEle.offsetTop;
 
   while (par) {
     if (navigator.userAgent.indexOf("MSIE 8.0") === -1) {
       // 累加父級(jí)參照物邊框
       totalTop += par.clientTop;
       totalLeft += par.clientLeft;
     }
     // 累加父級(jí)參照物本身的偏移
     totalTop += par.offsetTop;
     totalLeft += par.offsetLeft;
     par = par.offsetParent;
   }
   console.log('offsetTop: ' + totalTop + ', offsetLeft: ' + totalLeft);
   var result = {};
   result.offsetTop = totalTop;
   result.offsetLeft = totalLeft;
   return result;
 },
 
 win : function(attr, value) {
   if (value === undefined) {
     return document.documentElement[attr] || document.body[attr];
   }
   document.documentElement[attr] = value;
   document.body[attr] = value;
 }
};

3、json文件

[{"img":"./img/new1.PNG", "title": "1網(wǎng)絡(luò)強(qiáng)國(guó)戰(zhàn)略與“十三五”十四大戰(zhàn)略", "desc": "1互聯(lián)網(wǎng)是二十世紀(jì)人類最大的發(fā)明，互聯(lián)網(wǎng)是二十世紀(jì)人類最大的發(fā)明"},
 {"img":"./img/new2.PNG", "title": "2網(wǎng)絡(luò)強(qiáng)國(guó)戰(zhàn)略與“十三五”十四大戰(zhàn)略", "desc": "2互聯(lián)網(wǎng)是二十世紀(jì)人類最大的發(fā)明，互聯(lián)網(wǎng)是二十世紀(jì)人類最大的發(fā)明"},
 {"img":"./img/new3.PNG", "title": "3網(wǎng)絡(luò)強(qiáng)國(guó)戰(zhàn)略與“十三五”十四大戰(zhàn)略", "desc": "3互聯(lián)網(wǎng)是二十世紀(jì)人類最大的發(fā)明，互聯(lián)網(wǎng)是二十世紀(jì)人類最大的發(fā)明"}
]

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

您可能感興趣的文章: