使用 jQuery 做圖片加載

在網站設計中，圖片加載速度往往是網站性能的一大瓶頸。為了提高用戶體驗，我們需要優化圖片加載。在 jQuery 中，可以通過使用插件來實現圖片加載以及相關的功能。

比如，jQuery 插件 imgpreload 可以幫助我們預加載圖片，以免在頁面加載時出現空白的情況。

// 引入 imgpreload
<script src="https://cdn.jsdelivr.net/jquery.imgpreload/1.4.6/jquery.imgpreload.min.js"></script>
// 使用示例
$.imgpreload('img/a.png', 'img/b.png', 'img/c.png').done(function(imgs){
// 所有圖片加載完成的回調函數
console.log(imgs);
}).fail(function(imgs){
// 加載出錯時的回調函數
console.log(imgs);
}).progress(function(loaded, total, isBroken){
// 加載過程中的回調函數
console.log(loaded + '/' + total);
});

在以上代碼中，我們使用 $.imgpreload() 方法來加載圖片。這個方法在加載完成之后，會返回一個 Deferred 對象，它具有 done()、fail() 和 progress() 三個方法可以被調用。

done() 方法會在所有圖片加載完成時被調用，它會傳遞一個 imgs 數組作為參數，這個數組包含了所有完成加載的圖片對象。如果其中存在加載失敗的圖片，那么 fail() 方法會被調用，它也會傳遞一個 imgs 數組。progress() 方法會在加載過程中被調用，它接受三個參數，分別為已加載數量、總數量和是否加載失敗的標識。

除了 imgpreload 插件，jQuery 還有其他一些圖片加載相關的插件，如 lazyload、imageloader 等。它們的使用方法類似，具體可以參照它們的使用文檔實現圖片加載。

總體來說，jQuery 插件提供了一種方便易用的圖片加載方式，它為我們的網站優化提供了便捷的工具。