前端性能優化成神之路--圖片懶加載(lazyload image)

時間 2019-11-29

原文原文鏈接

圖片懶加載（固然不只限於圖片，還能夠有視頻，flash）也是一種優化前端性能的方式。使用懶加載能夠想要看圖片時才加載圖片，而不是一次性加載全部的圖片，從而在必定程度從減小服務端的請求javascript

什麼是懶加載html

懶加載怎麼個懶法，就是你不想看就不給你看，我也懶得加載出來，懶得去請求。通俗的說就是你不要就不給你，怎麼地。舉個栗子，好比在進入某個頁面的時候，它會有許多的圖片，有些圖片可能在下面，當咱們點進頁面但沒有滑動下去或沒看完整個頁面，那麼下面的圖片就會"沒用"，加載了也白加載，並且還下降了網頁的加載速度。所以用懶加載能當滾動到可視區域時才加載當前的圖片。前端

懶加載原理vue

圖片的加載是由src的值引發，當對src賦值時瀏覽器就會請求圖片資源，基於這個，能夠利用html5屬性data-XXX來保存圖片的路徑，當咱們須要加載圖片的時候纔將data-xxx的值賦予src，這樣就能實現圖片的按需加載，也就是懶加載了html5

懶加載優勢java

提升前端性能，圖片在須要的時候才加載，減輕服務的負擔，提升頁面的加載速度，可以減小帶寬。jquery

懶加載實現方式一：原生的js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01_HelloWorld</title>
</head>
<body>
<style>
  .box {
    margin: 0 auto;
    margin-top: 300px;
    width: 300px;
    background-image: url(http://ry-yuan.me/lazyload-demo/images/loading.gif);
    background-repeat: no-repeat;
    background-position: 85px 45px;
  }
  .lazy {
    width: 300px;
    height: 400px; /*須要一個佔位符，這裏是設置一個高度來佔位*/
  }
</style>
<div id="test">
  <div class="box"><img class="lazy" lazyload="true" data-original="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=48258326,4105883312&fm=173&app=49&f=JPEG?w=218&h=146&s=8931CB104E91B49433247DD70300E0E0"></div>
  <div class="box"><img class="lazy" lazyload="true" data-original="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2276560957,3887124918&fm=173&app=49&f=JPEG?w=218&h=146&s=A185D1144CB01590720C3D570300E0E3"></div>
  <div class="box"><img class="lazy" lazyload="true" data-original="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1843004824,3549031076&fm=173&app=49&f=JPEG?w=218&h=146&s=8825D9147ED29494720C35D70300D0E1"></div>
  <div class="box"><img class="lazy" lazyload="true" data-original="http://img4.imgtn.bdimg.com/it/u=1641365214,808713712&fm=26&gp=0.jpg"></div>
  <div class="box"><img class="lazy" lazyload="true" data-original="http://img2.3lian.com/2014/c7/13/d/8.jpg"></div>
  <div class="box"><img class="lazy" lazyload="true" data-original="http://image.biaobaiju.com/uploads/20181004/17/1538646709-JwVifpkBCe.jpg"></div>
  <div class="box"><img class="lazy" lazyload="true" data-original="http://image.biaobaiju.com/uploads/20180514/06/1526250640-OLXygnUEbr.jpg"></div>
  <div class="box"><img class="lazy" lazyload="true" data-original="http://img1.3lian.com/img013/v4/7/d/5.jpg"></div>
  <div class="box"><img class="lazy" lazyload="true" data-original="http://pic1.16pic.com/00/39/01/16pic_3901452_b.jpg"></div>
</div>

<script type="text/javascript" src="./lazyload.js"></script>
<script type="text/javascript">

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

let viewHeight = document.documentElement.clientHeight // 獲取可視區域的高度

function lazyload () {
  // 獲取全部標記了lazyload的img標籤
  let eles = document.querySelectorAll('img[data-original][lazyload]')

  // 遍歷全部的img標籤
  Array.prototype.forEach.call(eles, function (item, index) {
    let rect
    if (item.dataset.original === '')
      return
    rect = item.getBoundingClientRect()

    if (rect.bottom >= 0 && rect.top < viewHeight) {
      !function () {
        var img = new Image()
        img.src = item.dataset.original
        img.onload = function () {
          item.src = img.src
        }
        item.removeAttribute('data-original')
        item.removeAttribute('lazyload')
      }()
    }
  })
}

lazyload() //將首屏的圖片加載，由於沒有進行scroll，因此須要手動的調用一下

// scroll（頁面滾動的時候）監聽lazyload方法，獲取全部標記了lazyload的img標籤
document.addEventListener('scroll', lazyload)

懶加載實現方式二

使用jquery-lazyload.js，jQuery的插件用於懶加載使用，須要依賴jQuery， jquery-lazyload.js的參數:

threshold :設置Threshold參數來實現滾到距離其xx px時就加載。如：npm

$(function() {
     $("img.lazy").lazyload({
        threshold :100
    });
})

placeholder :爲某一圖片路徑.此圖片用來佔據將要加載的圖片的位置,待圖片加載時,佔位圖則會隱藏,好比放一些等待加載的圖片來優化用戶體驗效果。不設置設個參數，使用ｃｓｓ背景圖來實現也是能夠的，如實例中就是使用背景圖的方式替代這個參數瀏覽器

$(function() {
     $("img.lazy").lazyload({
        placeholder: "images/loading.gif"
    });
})

event ：觸發定義的事件時，圖片纔開始加載（此處click表明點擊圖片纔開始加載，還有mouseover，sporty,foobar(…)）app

$(function(){
      $("img.lazy").lazyload({
            event : "click"
      });
})

effects ：圖片顯示時的效果，默認是show。

$(function(){
      $("img.lazy").lazyload({
          effects:"fadeIn"
      });
})

container :值爲某容器.lazyload默認在拉動瀏覽器滾動條時生效,這個參數可讓你在拉動某DIV的滾動條時依次加載其中的圖片

$(function(){
        $("img.lazy").lazyload({
            container: $("#container") 
        });
 })

failure_limit ：通常用於當頁面中圖片不連續時使用，滾動頁面的時候, Lazy Load 會循環爲加載的圖片. 在循環中檢測圖片是否在可視區域內，插件默認狀況下在找到第一張不在可見區域的圖片時中止循環。如：

 $(function(){
        $("img.lazy").lazyload({
           failure_limit : 20
    });
})

這裏設爲20表示插件找到 20 個不在可見區域的圖片時才中止搜索。

skip_invisible :爲了提高性能，插件默認忽略隱藏的圖片；若是想要加載隱藏圖片.設置skip_invisible爲false;

 $(function(){
        $("img.lazy").lazyload({ 
            skip_invisible : false
    });
})

實現步驟：

第一步：引入：在HTML中引入jQuery和jQuery-lazyload

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery.lazyload.min.js"></script>

第二步：圖片中不使用src屬性，由於使用src屬性後就會默認發送請求請求圖片，使用data-original代替如

<img class="lazy" data-original="images/p1.jpg" style="margin-top:500px" height="300">

第三步：添加jQuery代碼

<script type="text/javascript">
    $(function() {
        $("img.lazy").lazyload();
    })
</script>

總體實例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .title {
            text-align: center;
            height: 100px;
            line-height: 100px;
        }
        .container {
            margin: 0 auto;
            width: 800px;
            box-shadow: 0 0 5px #ccc;
            overflow: hidden;
        }
        .box {
            margin: 0 auto;
            margin-top: 300px;
            width: 300px;
            background-image: url(http://ry-yuan.me/lazyload-demo/images/loading.gif);
            background-repeat: no-repeat;
            background-position: 85px 45px;
        }
        .lazy {
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>
    <p class="title">圖片懶加載演示(jquery-lazyload.js)</p>
    <div class="container">
        <div class="box"><img class="lazy" data-original="http://ry-yuan.me/lazyload-demo/images/p1.jpg"></div>
        <div class="box"><img class="lazy" data-original="http://ry-yuan.me/lazyload-demo/images/p2.jpg"></div>
        <div class="box"><img class="lazy" data-original="http://ry-yuan.me/lazyload-demo/images/p3.jpg"></div>
        <div class="box"><img class="lazy" data-original="http://ry-yuan.me/lazyload-demo/images/p4.jpg"></div>
    </div>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="jquery.lazyload.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("img.lazy").lazyload({
                effect: "fadeIn",  // 圖片出現效果
                threshold: 0,       //距離其xx px時就加載。
                //event: "click", // 添加事件
                failure_limit: 20  //// 找到 20 個不在可見區域的圖片時才中止搜索
            });
        })
    </script>
</body>
</html>

懶加載實現方式三

使用echo.js：專門用於實現懶加載，echo只有兩個可選參數：

offset：離可視區域多少像素的圖片能夠被加載

throttle：圖片延時多少毫秒加載

第一步：引入：echo.min.js文件，如:

<script type="text/javascript" src="js/echo.min.js"></script>

第二步：圖片中的src使用data-echo代替如:

<img class="lazy" data-echo="images/p1.jpg" style="margin-top:500px" height="300">

第三步：添加js代碼:

echo.init({
     offset: 500, 　　//離可視區域多少像素的圖片能夠被加載
   　throttle: 1000　　//圖片延時多少毫秒加載
});

總體實例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .title {
            text-align: center;
            height: 100px;
            line-height: 100px;
        }
        .container {
            margin: 0 auto;
            width: 800px;
            box-shadow: 0 0 5px #ccc;
            overflow: hidden;
        }
        .box {
            margin: 0 auto;
            margin-top: 300px;
            width: 300px;
            background-image: url(http://ry-yuan.me/lazyload-demo/images/loading.gif);
            background-repeat: no-repeat;
            background-position: 85px 45px;
        }
        .lazy {
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>
    <p class="title">圖片懶加載演示(echo.js)</p>
    <div class="container">
        <div class="box"><img class="lazy" data-echo="http://ry-yuan.me/lazyload-demo/images/p1.jpg"></div>
        <div class="box"><img class="lazy" data-echo="http://ry-yuan.me/lazyload-demo/images/p2.jpg"></div>
        <div class="box"><img class="lazy" data-echo="http://ry-yuan.me/lazyload-demo/images/p3.jpg"></div>
        <div class="box"><img class="lazy" data-echo="http://ry-yuan.me/lazyload-demo/images/p4.jpg"></div>
    </div>
    <script type="text/javascript" src="http://ry-yuan.me/lazyload-demo/js/echo.min.js"></script>
    <script type="text/javascript">
        echo.init({
            offset: 0, //離可視區域多少像素的圖片能夠被加載
            throttle: 500 //圖片延時多少毫秒加載
        });
    </script>
</body>
</html>

Vue應用中使用圖片懶加載

在vue應用中若是須要使用圖片懶加載，可使用vue-lazyload這個插件，插件參數

第一步：安裝插件

npm install vue-lazyload --save-dev

第二步：main.js引入插件

import VueLazyLoad from 'vue-lazyload'
// 在use中能夠自定義參數
Vue.use(VueLazyLoad,{
    error:require('./statics/site/imgs/erro.jpg'),
    loading:require('./statics/site/imgs/load.gif')
})

第三步：修改圖片顯示方式爲懶加載（將 :src 屬性直接改成v-lazy）

<img v-lazy="'/static/img/' + item.productImage">

相關標籤/搜索

每日一句

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