2. 程式人生 > >圖片預載入的那些事兒

圖片預載入的那些事兒

阿新 • • 發佈：2019-02-05

前言：最近在給一個創業公司做一個官網，涉及到很多圖片，載入速度不給力，使用者體驗很差。因此自己這次就採用了圖片預處理，在網上也看了一些其他大佬的部落格，收穫很多，在這裡總結一下，分享給大家。

1、什麼是圖片預載入

簡單的來說，圖片預載入就是我們在瀏覽到圖片之前，就已經載入好了，不用再擔心我們瀏覽圖片的時候，出現卡死或者白條的情況。其中圖片預載入也分為三種，第一種是無序載入，也就是載入不分順序，你給我載入完就行，我們在開啟有些網站的時候會遇到先轉幾圈再顯示，這裡就用到了無序載入。第二種就是有序載入，也就是按照先後順序來載入，這裡可以在有些翻頁的地方使用，我們從前向後一頁一頁的翻，圖片也就一頁一頁的預載入。第三種就是基於使用者行為的預載入，也就是我們去點選某個按鈕或者滾動的時候進行載入，首先我們來一個對照組，後面通過實驗組來進行對比。（下面程式碼複製可直接執行）

2、普通載入

通過下面程式碼，我們清空瀏覽器快取以後可以知道，當我們在點選下一頁或者上一頁的時候，才進行圖片載入，很容易出現白條或者卡死狀態。後面我們對其進行優化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>普通載入</title>
    <style>
        .content{
            width: 800px;
            height: 400px;
            margin
 
: 0 auto;
        }
        img {
            width: 100%;
            height: 100%;
        }
        .btn-div {
            margin-top: 30px;
            text-align: center;
        }
        button {
            padding: 10px 20px;
            width: 100px;
            background-color: #cdcdcd;
            border
 
: none;
            margin: 0 20px;
            outline: none;
        }
        button:hover {
            color: white;
            cursor: pointer;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="content">
        <img src="http://www.boyalibrary.com/dist/08fa276c6fcc523c9e134a6eeea56a39.jpg" />
    </div>
    <div class="btn-div">
        <button class="pre">上一頁</button>
        <button class="next">下一頁</button>
    </div>
    <script type="text/javascript">
        window.onload = function() {
            // 定義需要遍歷的圖片陣列
            var imgs = [
                '08fa276c6fcc523c9e134a6eeea56a39.jpg',
                '15f913bf2a8158220dca1fda61e6fe82.jpg',
                '825bd9f1e267b7ebadff9b5e6fbd79f7.jpg',
                '86793912ba0e2872126b3717752a08dd.jpg',
                'c835cc910976860779f38256b9f843f2.jpg',
                'c5396d5ae4bf830fed68690c8e828f9c.jpg',
                'ca8cc741192afe181d68a47092693b4c.jpg'
            ];
            // 獲取上一頁的DOM
            var oPre = document.querySelector(".pre");
            // 獲取下一頁的DOM
            var oNext = document.querySelector(".next");
            // 獲取圖片的DOM
            var oImg = document.getElementsByTagName("img")[0];
            // 定義當前是第幾張
            var currentIndex = 0;
            var imgLength = imgs.length;
            // 上一頁點選事件
            oPre.onclick = function() {
                currentIndex = currentIndex === 0 ? imgLength-1 : --currentIndex;
                // 更換圖片的src
                tab(currentIndex);
            };
            // 下一頁點選事件
            oNext.onclick = function() {
                currentIndex = currentIndex === imgLength-1 ? 0 : ++currentIndex;               
                tab(currentIndex);
            };
            // 更換圖片的src函式
            function tab(currentIndex) {
                console.log(currentIndex);
                oImg.src = "http://www.boyalibrary.com/dist/"+imgs[currentIndex];
                document.title = "第" + (currentIndex+1) + "張";
            }
        }
    </script>
</body>
</html>

3、無序載入

通過下面程式碼，我們可以知道圖片目前載入的程序，並且可以當所有圖片載入完成以後再顯示。
這裡寫圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>無序載入</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body,html {
            height: 100%;
        }
        .content {
            width: 800px;
            height: 400px;
            margin: 0 auto;
        }
        img {
            width: 100%;
            height: 100%;
        }
        .btn-div {
            margin-top: 30px;
            text-align: center;
        }
        button {
            padding: 10px 20px;
            width: 100px;
            background-color: #cdcdcd;
            border: none;
            margin: 0 20px;
            outline: none;
        }
        button:hover {
            color: white;
            cursor: pointer;
            background-color: orange;
        }
        .mask {
            position: fixed;
            font-size: 50px;
            text-align: center;
            width: 100%;    
            height: 100%;
            background-color: #cdcdcd;
        }
        p {
            margin-top: 200px;
        }
    </style>
</head>
<body>
    <div class="mask">
        <p class="progress">0 %</p>
    </div>
    <div class="content">
        <img src="http://www.boyalibrary.com/dist/08fa276c6fcc523c9e134a6eeea56a39.jpg" />
    </div>
    <div class="btn-div">
        <button class="pre">上一頁</button>
        <button class="next">下一頁</button>
    </div>
    <script type="text/javascript">
        window.onload = function() {
            var imgs = [
                '08fa276c6fcc523c9e134a6eeea56a39.jpg',
                '15f913bf2a8158220dca1fda61e6fe82.jpg',
                '825bd9f1e267b7ebadff9b5e6fbd79f7.jpg',
                '86793912ba0e2872126b3717752a08dd.jpg',
                'c835cc910976860779f38256b9f843f2.jpg',
                'c5396d5ae4bf830fed68690c8e828f9c.jpg',
                'ca8cc741192afe181d68a47092693b4c.jpg'
            ];
            var oMask = document.querySelector(".mask");
            var oProcess = oMask.querySelector(".progress");
            var imgLength = imgs.length;
            var count = 0;
            //圖片預載入核心程式碼
            for(var i=0; i<imgLength; i++) {
                var imgObj = new Image();
                imgObj.error=imgObj.onload = function() {
                    oProcess.innerHTML = '已載入'+Math.round((++count/(imgLength))*100) + ' %';
                    // 載入完成
                    if(count === imgLength){
                        oMask.style.display = 'none';
                    }
                }
                imgObj.src = "http://www.boyalibrary.com/dist/"+imgs[i];
            }

            // 獲取上一頁的DOM
            var oPre = document.querySelector(".pre");
            // 獲取下一頁的DOM
            var oNext = document.querySelector(".next");
            // 獲取圖片的DOM
            var oImg = document.getElementsByTagName("img")[0];
            // 定義當前是第幾張
            var currentIndex = 0;
            // 上一頁點選事件
            oPre.onclick = function() {
                currentIndex = currentIndex === 0 ? imgLength-1 : --currentIndex;
                // 更換圖片的src
                tab(currentIndex);
            };
            // 下一頁點選事件
            oNext.onclick = function() {
                currentIndex = currentIndex === imgLength-1 ? 0 : ++currentIndex;               
                tab(currentIndex);
            };
            // 更換圖片的src函式
            function tab(currentIndex) {
                console.log(currentIndex);
                oImg.src = "http://www.boyalibrary.com/dist/"+imgs[currentIndex];
                document.title = "第" + (currentIndex+1) + "張";
            }
        }
    </script>
</body>
</html>

4、有序載入

通過圖片載入程序圖，我們可以知道圖片載入是很有順序的，在很多場景這是很實用的
這裡寫圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序載入</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body,html {
            height: 100%;
        }
        .content {
            width: 800px;
            height: 400px;
            margin: 0 auto;
        }
        img {
            width: 100%;
            height: 100%;
        }
        .btn-div {
            margin-top: 30px;
            text-align: center;
        }
        button {
            padding: 10px 20px;
            width: 100px;
            background-color: #cdcdcd;
            border: none;
            margin: 0 20px;
            outline: none;
        }
        button:hover {
            color: white;
            cursor: pointer;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="content">
        <img src="http://www.boyalibrary.com/dist/08fa276c6fcc523c9e134a6eeea56a39.jpg" />
    </div>
    <div class="btn-div">
        <button class="pre">上一頁</button>
        <button class="next">下一頁</button>
    </div>
    <script type="text/javascript">
        window.onload = function() {
            var imgs = [
                '08fa276c6fcc523c9e134a6eeea56a39.jpg',
                '15f913bf2a8158220dca1fda61e6fe82.jpg',
                '825bd9f1e267b7ebadff9b5e6fbd79f7.jpg',
                '86793912ba0e2872126b3717752a08dd.jpg',
                'c835cc910976860779f38256b9f843f2.jpg',
                'c5396d5ae4bf830fed68690c8e828f9c.jpg',
                'ca8cc741192afe181d68a47092693b4c.jpg'
            ];
            var imgLength = imgs.length;
            var count = 0;
            load();
            function load() {
                var imgObj = new Image();
                imgObj.onload = imgObj.onerror = function() {
                    if(count < imgLength) {
                        load();
                    }
                    count++;
                }
                imgObj.src = "http://www.boyalibrary.com/dist/"+imgs[count];
            }

            // 獲取上一頁的DOM
            var oPre = document.querySelector(".pre");
            // 獲取下一頁的DOM
            var oNext = document.querySelector(".next");
            // 獲取圖片的DOM
            var oImg = document.getElementsByTagName("img")[0];
            // 定義當前是第幾張
            var currentIndex = 0;
            // 上一頁點選事件
            oPre.onclick = function() {
                currentIndex = currentIndex === 0 ? imgLength-1 : --currentIndex;
                // 更換圖片的src
                tab(currentIndex);
            };
            // 下一頁點選事件
            oNext.onclick = function() {
                currentIndex = currentIndex === imgLength-1 ? 0 : ++currentIndex;               
                tab(currentIndex);
            };
            // 更換圖片的src函式
            function tab(currentIndex) {
                console.log(currentIndex);
                oImg.src = "http://www.boyalibrary.com/dist/"+imgs[currentIndex];
                document.title = "第" + (currentIndex+1) + "張";
            }
        }
    </script>
</body>
</html>

4、基於使用者行為的載入

當我們將滑鼠移動上去的時候進行載入，這樣的主要好處是為伺服器減輕壓力，如果使用者不點選檢視，我們就不載入了。
這裡寫圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基於使用者行為的載入</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body,html {
            height: 100%;
        }
        .img {
            width: 800px;
            height: 400px;
            margin: 0 auto;
        }
        img {
            width: 100%;
            height: 100%;
        }
        .btn-div {
            margin-top: 30px;
            text-align: center;
        }
        button {
            padding: 10px 20px;
            width: 100px;
            background-color: #cdcdcd;
            border: none;
            margin: 0 20px;
            outline: none;
        }
        button:hover {
            color: white;
            cursor: pointer;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="img">
        <img src="http://www.boyalibrary.com/dist/08fa276c6fcc523c9e134a6eeea56a39.jpg" />
    </div>
    <div class="btn-div">
        <button class="pre">上一頁</button>
        <button class="next">下一頁</button>
    </div>
    <script type="text/javascript">
        window.onload = function() {
            var imgs = [
                '08fa276c6fcc523c9e134a6eeea56a39.jpg',
                '15f913bf2a8158220dca1fda61e6fe82.jpg',
                '825bd9f1e267b7ebadff9b5e6fbd79f7.jpg',
                '86793912ba0e2872126b3717752a08dd.jpg',
                'c835cc910976860779f38256b9f843f2.jpg',
                'c5396d5ae4bf830fed68690c8e828f9c.jpg',
                'ca8cc741192afe181d68a47092693b4c.jpg'
            ];
            // 獲取上一頁的DOM
            var oPre = document.querySelector(".pre");
            // 獲取下一頁的DOM
            var oNext = document.querySelector(".next");
            var imgLength = imgs.length;
            var loadIndex = 0;
            function load(loadIndex) {
                var imgObj = new Image();
                imgObj.src = "http://www.boyalibrary.com/dist/"+imgs[loadIndex];
            }
            oPre.onmouseover = function() {
                loadIndex = loadIndex === 0 ? imgLength-1 : --loadIndex;
                load(loadIndex);
            }
            oNext.onmouseover = function() {
                loadIndex = loadIndex === imgLength-1 ? 0 : ++loadIndex;
                load(loadIndex);
            }

            // 定義當前是第幾張
            var currentIndex = 0;
            // 獲取圖片的DOM
            var oImg = document.getElementsByTagName("img")[0];
            // 上一頁點選事件
            oPre.onclick = function() {
                currentIndex = currentIndex === 0 ? imgLength-1 : --currentIndex;
                // 更換圖片的src
                tab(currentIndex);
            };
            // 下一頁點選事件
            oNext.onclick = function() {
                currentIndex = currentIndex === imgLength-1 ? 0 : ++currentIndex;               
                tab(currentIndex);
            };
            // 更換圖片的src函式
            function tab(currentIndex) {
                console.log(currentIndex);
                oImg.src = "http://www.boyalibrary.com/dist/"+imgs[currentIndex];
                document.title = "第" + (currentIndex+1) + "張";
            }
        }
    </script>
</body>
</html>

（完）寫於2017/11/17 0:33

相關推薦

圖片預載入的那些事兒

前言：最近在給一個創業公司做一個官網，涉及到很多圖片，載入速度不給力，使用者體驗很差。因此自己這次就採用了圖片預處理，在網上也看了一些其他大佬的部落格，收穫很多，在這裡總結一下，分享給大家。 1、什麼是圖片預載入 簡單的來說，圖片預載入就是我們在瀏覽到圖

網頁中圖片預載入的原理

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

css圖片預載入

css  /* 預載入圖片，掛在body上 */ .preload-img:after{ content:""; background: url(../images/new/full_bg2.jpg) no-repeat -10000px -1000px; }

圖片預載入的實現

圖片預載入說白了就是將所有所需的圖片提前請求載入到本地，這樣後面在需要用到時就直接從快取取圖片 。圖片預載入的原理很簡單：new Image()，然後使用onload方法回撥預載入完成事件，當瀏覽器把圖片下載到本地後，之後同樣的src就直接使用快取。 無序載入

使用原生JavaScript實現圖片預載入,方法簡單程式碼少

//===結構程式碼 　　<img  src="./loading.gif" /> //===首先在頁面顯示的是一個loading圖  當請求返回的時候把返回的圖片替換上去 //====js程式碼 let imgArr = [ 　　'./beautiful.jpg', 　　'./beautiful

圖片預載入使用loading動畫，再載入內容

<!--頁面載入start--> <link rel="stylesheet" type="text/css" href="http://love.chengxumiao.net/wp-content/themes/Zenith/css/loader.min

圖片預載入的三個方法

利用CSS、JavaScript及Ajax實現圖片預載入的三大方法 　　預載入圖片是提高使用者體驗的一個很好方法。圖片預先載入到瀏覽器中，訪問者便可順利地在你的網站上衝浪，並享受到極快的載入速度。 這對圖片畫廊及圖片佔據很大比例的網站來說十分有利，它保證了圖片快速、無縫地釋出，也可幫助使用者

微信小程式的圖片預載入處理

一、常規的頁面處理的時候，我們可以使用多種方式處理圖片預載入，但是這些方法在小程式中似乎就沒有        那麼好用了，所以，我們可以使用圖片的回撥函式進行圖片的預載入處理； 二、微信小程式的第一種情況是： 現在有A ,B 兩個頁面        在B 頁面中有 10

img.onload 實現圖片預載入方法

例子： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <h

使用jquery.lazyload.js圖片預載入（懶載入）遇到的問題，圖片載入不出來

1、在使用jquery.lazyload.js時，如果是資料直接在DOM節點直接渲染，並且圖片排列規則，使用方法： 給img標籤新增的屬性有： <img class="lazy" src="__TEMP__/{$style}/public/images/load

javascript圖片預載入-解決圖片延遲響應慢

使用JavaScript改變圖片路徑時存在一個問題：當把新檔案的路徑交換到src屬性中時，瀏覽器必須下載該影象。如果等到某人把滑鼠游標移動到影象上之後才下載新影象，在新影象出現之前，可能會有一段不愉快的延遲。在導航欄的情況下，翻滾效果會令人感到遲緩而響應很慢。 為了避免這一

web圖片預載入的幾種方式

類似H5和一些動畫元素都需要提前載入完一些圖片 如果圖片在使用之前就已經請求過了， 那麼再次使用的時候，就不會再去請求（ps：圖片路徑一樣）。 1.使用純的css進行圖片預載入

js元件之----圖片預載入

jquery實現的圖片預載入原理, 沒有豐富的功能,但是基本功能可以實現. 如有雷同,純屬看了同一門課程… /** * 圖片預載入 * dependencies: jQuery * recommend: <script src='https://

圖片預載入與圖片懶載入（緩載）的區別與實現

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>原生Js圖片延遲載入</title> <style type="text/

js實現圖片預載入 imgpreLoad.js

// 更新：// 05.27: 1、保證回撥執行順序：error > ready > load；2、回撥函式this指向img本身// 04-02: 1、增加圖片完全載入後的回撥 2、提高

Javascript圖片預載入詳解

預載入圖片是提高使用者體驗的一個很好方法。圖片預先載入到瀏覽器中，訪問者便可順利地在你的網站上衝浪，並享受到極快的載入速度。這對圖片畫廊及圖片佔據很大比例的網站來說十分有利，它保證了圖片快速、無縫地釋出，也可幫助使用者在瀏覽你網站內容時獲得更好的使用者體驗。本文將分享三個不同

cocos2d-x 菜鳥學習筆記三（圖片預載入與進度條）

在做遊戲時，會用於很多和圖片資源，包括角色，動畫，紋理貼圖……為了減少GPU和CPU的快取佔用以及圖片的重複利用，在遊戲開始時，都會預載入這些資源進入快取，在cocos2d-x裡用的是CCTextureCache這個類。其實，在cocos2d-x自帶的TestCpp裡有對應的例子，在裡面用的是： [c

圖片預載入、佔位背景圖jquery plugin

預載入圖片的外掛 /* * jQuery Rawr Sliding Container (RSC) v1.0 * Website: http://hungred.com * Demo Site: http://hungred.com/wp-content/demo/

圖片預載入 loading

loading進度條 var index = 0, len = imgs.length, count = 0, $progress = $('.progress'); $.

安卓關於圖片壓縮的那些事兒,希望給每個安卓開發人員一些幫助

從事安卓開發也有幾年了,本人喜歡開門見山,此篇文章是處理以java語言下的安卓開發過程中圖片壓縮問題。 圖片載入在我們的開發過程中都是一個記憶體大戶,以至於我們載入每一個圖片bitmap物件的時候都應該進行回收以減少記憶體的佔用，而如果單張圖片的大小載入在記憶體