圖片的預加載和懶加載

時間 2019-11-10

標籤圖片加載简体版

原文原文鏈接

最近在作H5滑頁時，遇到一些比較大的場景，動輒二10、三十頁，而圖片更是可恨的能達到上百個，因此就會致使場景在加載的時候遇到網速比較慢的時候，用戶等待的時間特別長，這樣的話，就有可能致使一部分的用戶沒有耐心，而丟失這部分用戶，因而就有了這裏的圖片的預加載和懶加載，記個筆記，若是後邊用到了，還能夠來看看。
圖片的預加載是提高用戶體驗而損失性能的一種作法，而懶加載的性能就比較好了，因此將兩個結合起來放到web程序中是一種不錯的選擇。在用戶剛進入場景的時候，先加載幾頁的圖片，開始顯示給用戶，而後在用戶每翻一頁時，再相應的加載後面對應的一頁中的圖片，這樣，若是用戶看了幾頁不想看了，後邊的圖片就不用加載了，減輕了服務器的壓力。而相應的，用戶在進入場景時，等待的時間也減小了許多。javascript

預加載的實現

將圖片寫到css中，讓圖片不顯示

代碼：css

html<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>preloadByCss</title>
    <style type="text/css">
        .preloadTest {
width: 200px;
height: 200px;
border: 1px solid darkorange;
background: url("http://localhost/Public/css/images/hover.jpg");
background-size: 0;
        }
    </style>
</head>
<body>
    <div class="preloadTest">

    </div>
</body>
</html>

經過chrome的調試工具分析網絡
html

在js中經過new Image對象，而後指定Image的src，經過Image的src還能夠加載css、javascript

在chrome的調試工具中，能夠進行測試，這樣是否能夠進行加載，代碼以下：

在經過chrome的調試工具中的網絡分析欄，能夠看到確實發送了請求，而且也獲得了圖片

圖片的加載就能夠正常進行了，利用Image對象同時也能夠加載css、javascript

返回的數據
java

使用ajax預加載，使用ajax的時候不只能夠加載圖片，還能夠加載css、javascript。

關於預加載的三種方式能夠查看CSDN中的文章：http://www.csdn.net/article/2013-10-15/2817187-3-ways-preload-images-c...jquery

懶加載的實現

懶加載在一些大型的網站中見到的比較多，由於網站考慮到性能、流量及用戶體驗方面的問題，在用戶點擊開網站的首頁的時候，網站想盡量的顯示更多的信息給用戶，又要考慮到服務器的性能的問題，還不能讓用戶等待的時間過長，因此這裏就出現了圖片的懶加載。圖片的懶加載可讓用戶按照需求從服務器上加載圖片，這樣即節省了用戶在代開首頁時的等待時間，也節省了服務器的流量，因此是一個好的選擇。懶加載的基本思路就是不給img標籤寫src屬性，而是寫到一個後邊能夠操做的屬性中，如data-src中，而後在後邊須要加載的時候，加載圖片，圖片地址寫到src中。
以下面的這段代碼：web

html<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lazyload Demo</title>
    <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
</head>
<body>


<div class="img">
    <img data-src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white_81d09391.png" alt="logo"/>
    <br/>
    <button class="showImg">
        點我顯示圖片
    </button>

    <script type="text/javascript">
        $(".showImg").click(function() {
            var show = $(".img > img");
            show.attr("src", show.attr("data-src"));
        });
    </script>
</div>


</body>
</html>

若是須要這個img顯示的時候，直接讓這個img顯示，而後把這個img的data-src給src就能夠完成圖片的懶加載。
讓代碼運行，而後打開chrome的調試工具，而後查看網絡發現這裏並無對這個圖片進行加載：

而後在點擊圖片，發現：

這樣原理上就實現了圖片的懶加載，可是在實際的生產環境中，確定不會是這麼簡單的，去點擊一個按鈕，而後讓圖片加載出來，大多數的應用場景都是，圖片到了要顯示的屏幕中了，而後在去加載，或者說再差一點就要到屏幕中，而後開始加載。ajax

實際生產環境中的使用

在實際的生產環境中考慮到本身寫的預加載和懶加載的代碼的性能不高等問題，這裏就能夠採用createJS中的preload.js和jquery.lazyload.js兩個插件完成資源的預加載和懶加載。
[preload.js官網]：http://createjs.com/preloadjs
[lazyload.js官網]：http://www.appelsiini.net/projects/lazyload
用法基本上看文檔就能夠了，在使用的過程當中遇到的一個問題就是如何判斷懶加載已經加載完成了，在網上沒有找到相關的資料（請原諒我太菜），本身就稍微看了下源碼，發現其中有一個load的參數，而後給它指定一個回調函數，在函數中執行加載完成要執行的代碼就能夠了。chrome

後記

本人的JS水平實在是太菜了，請見諒。服務器

相關標籤/搜索

每日一句

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