最常見的網站特效之一就是圖片預加載。該技術可以在網站載入時提前加載所有圖片，這樣當用戶點擊頁面鏈接或按鈕時就能夠快速顯示圖片而不會有延遲。JavaScript 是實現圖片預加載的最好工具之一。 預加載圖片可以提高網站的性能和用戶體驗，特別是在圖片數量較多、文件大小較大的情況下。下面將介紹如何使用 JavaScript 來完成圖片預加載。 第一步，創建一個數組用于存儲圖片的 URL 地址。例如，如果要預加載名為 “image.jpg” 的圖片，可以將 URL 存儲在數組中：

var images = [];
images[0] = "image.jpg";

這將創建一個名為 images 的數組，并將圖片的 URL 存儲在索引為 0 的位置。 第二步，創建一個函數來預加載圖片并將其保存在瀏覽器緩存中。使用 JavaScript，可以創建一個新的 Image() 對象，使用該對象的 onLoad 事件來確保圖片加載完成并已保存到緩存：

function preloadImages() {
for (var i = 0; i< images.length; i++) {
var img = new Image();
img.src = images[i];
img.onload = function() {
console.log("Image " + i + " is loaded");
}
}
}

在此代碼中，我們創建了一個名為 “preloadImages()” 的函數用于預加載圖片。使用一個 for 循環遍歷數組中的所有 URL，然后創建一個新的 Image 對象并將 URL 分配給其 src 屬性。 img.onload 事件將在圖片加載完成時調用，我們在控制臺上打印了圖片的序號以對其進行確認。 第三步，調用預加載函數。預加載函數應在頁面加載時調用，否則加載完成后再調用將無法提高網站性能。我們可以在 window.onload 事件中調用此函數：

window.onload = function() {
preloadImages();
}

這樣，當頁面加載完成時，preloadImages() 函數便會自動運行，所有圖片都已加載且已保存在瀏覽器緩存中，可以隨時使用和顯示。 最后，如果需要在顯示圖片前加入一些過渡效果，可以在圖像加載時添加一些 CSS 或 JavaScript 動畫效果，例如淡入、縮放等等。這將幫助提高用戶體驗并且使您的網站更具吸引力。 總之，JavaScript 圖片預加載技術可以幫助提高網站性能和用戶體驗。通過創建一個存儲所有希望預加載的圖片的數組，然后使用 Image() 對象加載和保存這些圖片，可以實現輕松、快速、高效的圖片預加載效果。