3種Javascript圖片預加載的方法詳解

加載圖片是提高用戶體驗的一個很好方法。圖片預先加載到瀏覽器中，訪問者便可順利地在你的網站上沖浪，并享受到極快的加載速度。

這對圖片畫廊及圖片占據很大比例的網站來說十分有利，它保證了圖片快速、無縫地發布，也可幫助用戶在瀏覽你網站內容時獲得更好的用戶體驗。本文將分享三個不同的預加載技術，來增強網站的性能與可用性。

方法一：用css和JavaScript實現預加載

實現預加載圖片有很多方法，包括使用css、JavaScript及兩者的各種組合。這些技術可根據不同設計場景設計出相應的解決方案，十分高效。

單純使用CSS，可容易、高效地預加載圖片，代碼如下：

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }  
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }  
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

將這三個ID選擇器應用到(X)html元素中，我們便可通過CSS的background屬性將圖片預加載到屏幕外的背景上。

只要這些圖片的路徑保持不變，當它們在Web頁面的其他地方被調用時，瀏覽器就會在渲染過程中使用預加載（緩存）的圖片。簡單、高效，不需要任何JavaScript。

該方法雖然高效，但仍有改進余地。使用該法加載的圖片會同頁面的其他內容一起加載，增加了頁面的整體加載時間。

為了解決這個問題，我們增加了一些JavaScript代碼，來推遲預加載的時間，直到頁面加載完畢。代碼如下：

function preloader() {  
    if (document.getElementById) {  
        document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";  
        document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px";  
        document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px";  
    }  
}  
function addLoadEvent(func) {  
    var oldonload = window.onload;  
    if (typeof window.onload != 'function') {  
        window.onload = func;  
    } else {  
        window.onload = function() {  
            if (oldonload) {  
                oldonload();  
            }  
            func();  
        }  
    }  
}  
addLoadEvent(preloader);

在該腳本的第一部分，我們獲取使用類選擇器的元素，并為其設置了background屬性，以預加載不同的圖片。

該腳本的第二部分，我們使用addLoadEvent()函數來延遲preloader()函數的加載時間，直到頁面加載完畢。

如果JavaScript無法在用戶的瀏覽器中正常運行，會發生什么？很簡單，圖片不會被預加載，當頁面調用圖片時，正常顯示即可。

方法二：僅使用JavaScript實現預加載

上述方法有時確實很高效，但我們逐漸發現它在實際實現過程中會耗費太多時間。相反，我更喜歡使用純JavaScript來實現圖片的預加載。

下面將提供兩種這樣的預加載方法，它們可以很漂亮地工作于所有現代瀏覽器之上。

JavaScript代碼段1

只需簡單編輯、加載所需要圖片的路徑與名稱即可，很容易實現：

<div class="hidden">  
    <script type="text/javascript">  
           var images = new Array()  
            function preload() {  
                for (i = 0; i < preload.arguments.length; i++) {  
                    images[i] = new Image()  
                    images[i].src = preload.arguments[i]  
                }  
            }  
            preload(  
                "http://domain.tld/gallery/image-001.jpg",  
                "http://domain.tld/gallery/image-002.jpg",  
                "http://domain.tld/gallery/image-003.jpg"  
            )  
</script> 
</div>

該方法尤其適用預加載大量的圖片。我的畫廊網站使用該技術，預加載圖片數量達50多張。將該腳本應用到登錄頁面，只要用戶輸入登錄帳號，大部分畫廊圖片將被預加載。

JavaScript代碼段2

該方法與上面的方法類似，也可以預加載任意數量的圖片。將下面的腳本添加入任何Web頁中，根據程序指令進行編輯即可。

<div class="hidden">  
    <script type="text/javascript">  
            if (document.images) {  
                img1 = new Image();  
                img2 = new Image();  
                img3 = new Image();  
                img1.src = "http://domain.tld/path/to/image-001.gif";  
                img2.src = "http://domain.tld/path/to/image-002.gif";  
                img3.src = "http://domain.tld/path/to/image-003.gif";  
            }    
</script>  
</div>

正如所看見，每加載一個圖片都需要創建一個變量，如“img1 = new Image();”，及圖片源地址聲明，如“img3.src = “../path/to/image-003.gif”;”。參考該模式，你可根據需要加載任意多的圖片。

我們又對該方法進行了改進。將該腳本封裝入一個函數中，并使用 addLoadEvent（），延遲預加載時間，直到頁面加載完畢。

function preloader() {  
    if (document.images) {  
        var img1 = new Image();  
        var img2 = new Image();  
        var img3 = new Image();  
        img1.src = "http://domain.tld/path/to/image-001.gif";  
        img2.src = "http://domain.tld/path/to/image-002.gif";  
        img3.src = "http://domain.tld/path/to/image-003.gif";  
    }  
}  
function addLoadEvent(func) {  
    var oldonload = window.onload;  
    if (typeof window.onload != 'function') {  
        window.onload = func;  
    } else {  
        window.onload = function() {  
            if (oldonload) {  
                oldonload();  
            }  
            func();  
        }  
    }  
}  
addLoadEvent(preloader);

方法三：使用Ajax實現預加載

上面所給出的方法似乎不夠酷，那現在來看一個使用Ajax實現圖片預加載的方法。該方法利用DOM，不僅僅預加載圖片，還會預加載CSS、JavaScript等相關的東西。使用Ajax，比直接使用JavaScript，優越之處在于JavaScript和CSS的加載不會影響到當前頁面。該方法簡潔、高效。

window.onload = function() {  
    setTimeout(function() {  
        // XHR to request a js and a CSS  
        var xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://domain.tld/preload.js');  
        xhr.send('');  
        xhr = new XMLHttpRequest();  
        xhr.open('GET', 'http://domain.tld/preload.css');  
        xhr.send('');  
        // preload image  
        new Image().src = "http://domain.tld/preload.png";  
    }, 1000);  
};

上面代碼預加載了“preload.js”、“preload.css”和“preload.png”。1000毫秒的超時是為了防止腳本掛起，而導致正常頁面出現功能問題。

下面，我們看看如何用JavaScript來實現該加載過程：

window.onload = function() {  
    setTimeout(function() {  
        // reference to <head>  
        var head = document.getElementsByTagName('head')[0];  
        // a new CSS  
        var css = document.createElement('link');  
        css.type = "text/css";  
        css.rel  = "stylesheet";  
        css.href = "http://domain.tld/preload.css";  
        // a new JS  
        var js  = document.createElement("script");  
        js.type = "text/javascript";  
        js.src  = "http://domain.tld/preload.js";  
        // preload JS and CSS  
        head.appendChild(css);  
        head.appendChild(js);  
        // preload image  
        new Image().src = "http://domain.tld/preload.png";  
    }, 1000); 
};

這里，我們通過DOM創建三個元素來實現三個文件的預加載。正如上面提到的那樣，使用Ajax，加載文件不會應用到加載頁面上。從這點上看，Ajax方法優越于JavaScript。

- End -

聊聊圖片預加載：提升用戶體驗與性能的秘密武器

**引言：**

在Web前端開發中，圖片資源的加載速度直接影響著用戶體驗和頁面性能。尤其是在涉及到大量圖片展示的網站或應用中，圖片預加載作為一種優化手段顯得尤為重要。本文將詳細介紹圖片預加載的原理、應用場景、實現方法以及相關注意事項，并通過具體的HTML+JS代碼實例，讓你深入了解如何運用預加載技術改善用戶的瀏覽體驗。

---

### **一、什么是圖片預加載？**

**標題：未雨綢繆，提前加載的背后邏輯**

圖片預加載是指在用戶實際查看圖片之前，預先將圖片資源加載到瀏覽器緩存中。這樣當用戶瀏覽到對應位置時，圖片已經處于可用狀態，從而避免了圖片加載導致的頁面空白或延遲現象，顯著提升了頁面的流暢性和整體性能。

---

### **二、圖片預加載的重要性**

**標題：瞬間加載，用戶體驗的飛躍**

1. **更快的視覺呈現**：預加載能夠確保圖片在用戶視線到達前就已經準備好，減少用戶等待圖片加載的時間，提供即視即所得的瀏覽體驗。

2. **優化頁面滾動流暢性**：對于長頁面和圖片瀑布流等場景，預加載能夠消除滾屏時的圖片加載滯后問題，確保頁面滾動過程平滑無阻。

3. **降低用戶跳出率**：快速加載的內容能夠增加用戶留存，減少因等待時間過長而導致的用戶流失。

---

### **三、圖片預加載的實現方法**

**標題：實戰演練，手把手教你實現預加載**

1. **HTML `<link rel="prefetch">` 方式**

```html

```

`rel="prefetch"` 屬性告訴瀏覽器在閑置時預先下載指定資源，適用于瀏覽器支持的情況下對將來可能訪問的資源進行預加載。

2. **JavaScript 實現預加載**

```javascript

// 基礎圖片預加載函數

function preloadImages(urls) {

urls.forEach(function(url) {

var img = new Image();

img.src = url;

});

}

// 使用預加載函數

var imageUrls = ['image1.jpg', 'image2.jpg'];

preloadImages(imageUrls);

```

上述JavaScript代碼中，我們通過創建新的`Image`對象并設置其`src`屬性為待加載圖片URL的方式實現預加載。當瀏覽器解析到這一行代碼時，就會立即發送請求加載圖片資源。

3. **更進階的預加載庫（如lozad.js）**

```html

<img

data-src="image.jpg"

class="lozad"

alt="Example Image"

```

Lozad.js是一個輕量級的懶加載庫，它能夠在圖片進入可視區時才進行加載，既實現了預加載的目的，又節省了帶寬和CPU資源。

---

### **四、圖片預加載的注意事項**

**標題：謹慎而行，預加載的合理應用**

1. **合理安排預加載數量**：過多的預加載可能導致帶寬占用過高，影響其他關鍵資源加載速度。

2. **判斷用戶網絡狀況**：在低速網絡環境下，避免無腦預加載，可采用動態加載策略。

3. **隱私保護與資源優化**：尊重用戶隱私，避免預加載無關緊要的資源，同時對圖片進行壓縮和尺寸裁剪，減輕預加載負擔。

---

**結語：**

圖片預加載作為Web前端優化的一項關鍵技術，巧妙運用可以顯著提升用戶體驗，降低用戶流失率。在實踐中，我們要根據具體項目需求和用戶場景，靈活選擇合適的預加載策略，做到既能加速頁面渲染，又能兼顧性能與資源優化，達到提升網站整體表現的終極目標。而不斷精進和深化前端優化技術，正是每一位前端開發者追求卓越的必由之路。

言

隨著Flutter穩定版本逐步迭代更新，京東APP內部的Flutter業務也日益增多，Flutter開發為我們提供了高效的開發環境、優秀的跨平臺適配、豐富的功能組件及動畫、接近原生的交互體驗，但隨之也帶來了一些OOM問題，通過線上監控信息和Observatory工具結合分析我們發現問題的原因是由于Flutter頁面中加載的大量圖片導致的內存溢出，這也是在原生開發中常見的問題之一，Flutter官方為我們提供的Image widget實現圖片加載及顯示，只有了解Flutter中圖片的加載原理及圖片內存管理方式才能真正發現問題的本質，本文將重點介紹Flutter中圖片的加載原理，使用過程中有哪些需要注意的地方及優化思路和手段，希望能給大家帶來一些啟發和幫助。

基本使用

下面是 Image 的基本使用方法，image參數是 Image 控件中的必選參數，也是數據源類型可以是Asset、網絡、文件、內存，下面將以我們常用的網絡圖片加載方式為例子講解原理，基本使用如下：

Image(

 image: NetworkImage(

     "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),

 width: 100.0,

 heitht: 100.0

)

Image 控件的使用方法這里就不在展開了，控件的參數及API詳情請參閱：https://api.flutter.dev/flutter/widgets/Image-class.html

圖片加載流程

Flutter 的圖片加載原理與原生客戶端中的圖片框架加載原理相似，具體可點擊下方大圖查看，加載步驟如下：

1、區分數據來源生成緩存列表中數據映射的唯一key；

2、通過key讀取緩存列表中的圖片數據；

3、緩存存在，返回已存在的圖片數據；

4、緩存不存在，按來源加載圖片數據，解碼后同步到緩存中并返回；

5、設置回調監聽圖片數據加載狀態，數據加載完成后重新渲染控件顯示圖片；

大家可能注意到了上面流程圖中的文件緩存部分是灰色的，目前官方還不支持此功能，下面我們會通過源碼逐步分析加載流程及如何通過修改源碼補全文件緩存功能。

源碼分析

下面將通過流程圖結合UML類圖分析圖片加載流程：

這個UML類圖看起來稍微有點兒復雜，但仔細看會發現已將圖片數據加載流程分成幾大模塊，下面將按照模塊進行逐步分析，下面將以網絡圖片加載方式為例講解核心類和核心方法功能。

核心類及方法介紹

啟動緩存相關類

PaintingBinding：圖片緩存類和著色器預加載，該類是基于框架的應用程序啟動時綁定到Flutter引擎的膠水類，在啟動入口main.dart的runApp方法中創建WidgetsFlutterBinding類時被初始化的，通過覆蓋父類的initInstances()方法初始化內部的著色器預加載（Skia第一次在GPU上繪制需要編譯相應的著色器，這個過程大概20ms～200ms）及圖片緩存等，圖片緩存以單例的方式（PaintingBinding.instance.imageCache）對外提供方法使用，也就是說這個圖片緩存在APP中是全局的，并在這個類中還提供了圖像解碼（instantiateImageCodec）、緩存清除（evict）等功能。

ImageCache：圖片緩存類，默認提供緩存最大個數限制1000個對象和最大容量限制100MB，由于圖片加載過程是一個異步操作，所以緩存的圖片分為三種狀態：已使用、已加載、未使用，分別對應三個圖片緩存列表，當圖片列表超限時會將圖片緩存列表中最近最少使用圖片進行刪除，緩存列表分別是：活躍中圖片緩存列表（_cache）、已加載圖片緩存列表(_pendingImages)、未活躍圖片緩存列表(_liveImages)，并對外提供以下方法：獲取緩存（putIfAbsent）、清空緩存（clear、clearLiveImages）、驅逐單個圖片（evict）、最大緩存個數限制（maximumSize）、最大緩存大小限制（maximumSizeBytes）等方法。

從源碼中我們可以看到緩存列表是Map類型，Flutter中的Map創建的對象是LinkedHashMap是有序的，按鍵值插入順序迭代，Flutter使用LinkedHashMap存儲圖片數據并實現類似LRU算法的緩存，當緩存列表中的圖片被使用后會將圖片數據重新插入到緩存列表的末尾，這樣最近最少使用的圖片始終會被放在列表的頭部。

當緩存列表增加圖片數據后，會通過最大緩存個數和最大緩存大小兩個緯度進行檢查緩存列表是否超限，若存在超限情況則通過Map的keys.first方法獲取緩存列表頭部最近最少使用的圖片對象進行刪除，直到滿足緩存限制。

啟動緩存小結：

Flutter啟動后在PaintingBinding中創建ImageCache緩存，圖片緩存是全局的并以單例方式對外提供使用方法，緩存默認最大個數限制1000個對象、最大容量限制100MB，緩存中的Map列表通過key/value方式存儲圖片信息，并通過keys.first方法實現的類似LRU算法管理圖片緩存列表，對外提供putIfAbsent()方法獲取已緩存圖像，若緩存中不存在則通過回調圖片加載類中的load()方法加載圖片數據，另外圖片緩存中還提供clear()和evict()方法用來刪除緩存。

圖片數據加載相關類

ImageProvider：圖片數據提供抽象類，該類定義了圖像數據解析方法（resolve）、唯一key生成方法（obtainKey）、數據加載方法（load），obtainKey 和load方法均由子類實現，obtainKey方法生成的對象用于內存緩存的key值使用，load方法將按照不同數據源加載圖像數據，常用的Provider子類有：NetworkImage、AssetImage、FileImage、MemoryImage，我們可以看到resolve方法返回的是圖片加載對象類（ImageStream），load方法返回的是ImageStreamCompleter類用來管理圖像加載狀態及圖像數據（ImageInfo）。

ImageStreamCompleter：是一個抽象類，用于管理加載圖像對象（ImageInfo）加載過程的一些接口，Image控件中正是通過它來監聽圖片加載狀態的。

ImageStream：圖像的加載對象，可監聽圖像數據加載狀態，由ImageStreamCompleter返回一個ImageInfo對象用于圖像顯示

NetworkImage：網絡圖片加載類，ImageProvider的實現類，通過URL加載網絡圖像，覆蓋load()方法返回ImageStreamCompleter的實現類MultiFrameImageStreamCompleter，構建該類需要一個codec參數類型是Future<ui.Codec>，通過調用_loadAsync()方法下載網絡圖片數據獲得字節流后通過調用PaintingBinding.instance.instantiateImageCodec方法對數據進行解碼后獲得Future<ui.Codec>對象，obtainKey方法我們發現返回的是SynchronousFuture<NetworkImage>(this)對象，正是NetworkImage 自己本身，我們通過該類的==方法可以看到判斷兩個NetworkImage類是否相等通過runtimeType 、url 、scale 這三個參數來判斷，所以圖片緩存中的key相等判斷取決于圖片的url、scale、runtimeType參數。

MultiFrameImageStreamCompleter：是ImageStreamCompleter的子類是Flutter SDK的預置類，構建該類需要一個codec參數類型是Future<ui.Codec>，Codec 是處理圖像編解碼器的句柄也是Flutter Engine API的包裝類，可通過其內部的frameCount變量獲取圖像幀數，分別處理單幀和多幀（動態圖）圖像，內部的getNextFrame()方法獲取每幀的圖像數據并創建Image控件中渲染需要的ImageInfo數據，調用onImage方法將ImageInfo返回給Image控件。

圖像數據加載小結：

上面以網絡圖像加載流程分析，首先通過ImageProvider的resolve()方法創建ImageStream對象，obtainKey()方法創建圖像緩存列表中的唯一key（取決于圖像url和scale），通過load()方法加載圖像數據并返回MultiFrameImageStreamCompleter對象，并將其設置給ImageStream中的setCompleter()方法添加監聽圖像加載完成狀態，圖像數據通過Codec 處理幀數分別處理最終創建ImageInfo對象通過ImageStreamListener的onImage方法返回給Image控件。

圖片渲染相關類

_ImageState：是Image控件創建的State類，通過調用ImageProvider的resolve()方法解析圖片數據，resolve()方法返回的ImageStream對象，通過addListener()增加圖片解析狀態監聽，通過ImageStreamListener的onImage回調中獲取圖片數據（ImageInfo）加載完成狀態，onChunk回調監聽數據加載進度，onError監聽圖片加載錯誤狀態，最終通過調用setState進行數據更新繪制。

細心的同學會發現ImageProvider的實例對象（widget.image）被ScrollAwareImageProvider包裝了一下又重新創建了一個provider，在ScrollAwareImageProvider內部主要是重寫了其中的resolveStreamForKey()方法，Flutter SDK 1.17版本中對圖片解析增加了快速滾動優化，當判斷當前屏幕處在快速滾動狀態時，則將圖片解析過程延遲下一幀幀尾進行。

RawImage：RenderObjectWidget的子類，重寫createRenderObject方法創建RenderObject子類。

RenderImage：渲染樹中RenderObject的實現類，Flutter的三棵樹Widget、Element、RenderObject ，而RenderObject這是負責繪制渲染的，RenderImage重寫performLayout()方法度量渲染尺寸并布局，重寫paint()方法獲取畫布Canvas，Canvas是記錄圖片操作的接口類，通過參數處理圖片鏡像、裁剪、平鋪等邏輯后調用的drawImageNine()和drawImageRect()方法將圖片合成到畫布上最終調用Skia引擎API進行繪制。

圖片渲染小結：

Image控件中通過調用ImageProvider的resolve()方法獲取圖片數據ImageInfo對象，通過setState方法將數據更新給圖片渲染控件（RenderImage），RenderImage中重寫paint()方法根據傳入參數對圖片數據處理后繪制到Canvas畫布上并調用Skia引擎API進行繪制。

總結

以上是 Image 圖片加載原理及源碼分析，那么我們在翻閱了Image源碼后能做些什么呢？使用過程中有哪些可以優化的部分呢？讓我們繼續往下看。

圖片緩存池大小限制優化

Flutter本身提供了定制化Cache的能力，所以優化ImageCache的第一步就是要根據機型的實際物理內存去做緩存大小的適配，通過PaintingBinding.instance.imageCache調用的maximumSize和maximumSizeBytes動態設置合理的圖片緩存大小限制避免因圖片過多導致OOM。

未顯示圖像內存優化

可結合StatefulWidget控件生命周期中的deactive()、dispose()等方法，在頁面控件中的圖片未顯示在屏幕上或控件已銷毀時調用圖片緩存中的evict()方法進行資源釋放。

圖片預緩存處理

Image控件中提供了precacheImage()方法可以將需要顯示的圖片預先加載到ImageCache的緩存列表中，緩存列表中通過key值區分相同圖片，在頁面打開后直接從內存緩存獲取，可快速顯示圖片。

圖片文件緩存

通過查看網絡圖片加載類NetworkImage源碼可以發現，圖片數據下載和解碼過程都是通過_loadAsync()方法完成的，所以我們可以通過改造這個方法中圖片文件下載、讀取、保存過程去增加圖片文件本地存儲、獲取原生圖片庫緩存、圖片下載DNS處理等功能。

自定義占位圖、錯誤圖效果

Image控件中的frameBuilder和errorBuilder參數分別為我們提供了占位圖和錯誤圖的自定義方式，也可使用FadeInImage控件提供的占位圖（placeholder）、錯誤圖imageErrorBuilder等參數，FadeInImage內部實現也是Image控件，感興趣的同學可以查看其源碼實現。

大圖下載進度自定義顯示

顯示效果：https://flutter.github.io/assets-for-api-docs/assets/widgets/loading_progress_image.mp4

圖片可拉伸區域設置（.9圖片）

RenderImage的paint方法中我們發現在調用Canvas API繪制前會判斷centerSlice參數分別調用drawImageNine()和drawImageRect()方法，Image正式通過centerSlice參數配置圖片的可拉伸區域，參考代碼：centerSlice: Rect.fromLTWH(20, 20, 1, 1)，L：橫向可拉伸區域左邊起始點位置，T：縱向可拉伸區域上邊起始點位置，W：橫向可拉伸區域寬度，H：縱向可拉伸區域寬度。

未來規劃

本文介紹了京東APP中Flutter探索遇到的問題以及圖片的加載原理和使用過程中的一些技巧，隨著Flutter SDK版本迭代更新，我們將繼續對圖片加載框架進行優化，原生開發中的多個優秀圖片框架已經經歷了大量用戶的考驗這也一直是我們渴望在Flutter上復用的能力，所以我們也在積極探索原生和Flutter中圖片內存共享方案，我們希望這個增強能力是非侵入式的，我們也在嘗試外接紋理等方案，這塊技術細節進展將在后續文章中繼續和大家一起探討。

參考資料

1、http://storage.360buyimg.com/pub-image/Image-source.jpg

2、https://book.flutterchina.club/chapter14/image_and_cache.html

3、https://api.flutter-io.cn/flutter/painting/ImageCache-class.html

作者：京東零售徐宏偉
來源：京東云開發者社區

在線咨詢

上一篇：探秘網頁性能提升利器之CSS硬件加速
下一篇：如何在蘋果電腦上創建一個html格式文件，并在瀏覽器正確打開

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商