如何使用jQuery快速預載圖片？

使用jQuery 預先載入圖片：快速簡便指南

雖然可以使用複雜的圖片預先載入腳本，但本文提供了一種簡潔明了的方法使用jQuery 預先載入映像。

jQuery程式碼

以下程式碼片段示範了預先載入多個映像的簡單有效的方法：

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

在此程式碼中， preload() 函數採用圖片路徑數組並預先載入透過建立不可見的 每個映像元素並將其src 屬性設定為映像路徑。或者，您也可以使用 (new Image()).src = this 來預先載入圖片。

替代jQuery 外掛程式

如果首選外掛方法，則下面的程式碼片段提供了一個簡潔的外掛程式：

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

// Usage:

$(['img1.jpg','img2.jpg','img3.jpg']).preload();

這個外掛程式擴充了jQuery 對象，並允許您透過呼叫來預先載入圖像圖像路徑數組上的preload() 方法。

使用這些方法，預先載入映像將成為一項快速且輕鬆的任務，確保 Web 應用程式的最佳效能。

以上是如何使用jQuery快速預載圖片？的詳細內容。更多資訊請關注PHP中文網其他相關文章！