圖片預加載可通過JavaScript的image對象、css background-image或fetch api實現。1. 使用image對象，設置src屬性并監聽onload事件，可判斷complete屬性避免重復加載；2. 利用background-image將圖片url設為隱藏元素樣式，但無法監聽加載完成；3. 通過fetch獲取圖片blob數據，創建objecturl并加載，需注意釋放url對象防止內存泄漏。為避免重復加載，應配合瀏覽器緩存策略如cache-control頭部，或使用localstorage存儲base64圖片（適合小圖）。預加載大量圖片時，應限制并發請求數、采用懶加載、壓縮圖片及使用cdn加速以優化性能。
圖片預加載，本質上就是讓圖片在真正顯示到頁面之前，先下載到瀏覽器緩存里。這樣，用戶在瀏覽頁面時，就能更快地看到圖片，避免長時間的等待，提升用戶體驗。
解決方案
在html中，我們可以利用JavaScript的Image對象和onload事件來處理圖片預加載。創建一個Image對象，設置其src屬性為圖片的URL，瀏覽器就會開始下載圖片。onload事件會在圖片下載完成后觸發，我們可以在這個事件中執行一些操作，比如更新頁面上的圖片顯示狀態，或者記錄預加載的完成情況。
立即學習“前端免費學習筆記（深入）”；
function preloadImage(url, callback) { const img = new Image(); img.src = url; if (img.complete) { // 如果圖片已經加載完成，直接執行回調 callback.call(img); } else { img.onload = () => { callback.call(img); }; img.onerror = () => { console.error("圖片加載失敗:", url); // 可以選擇執行失敗回調，或者忽略 }; } } // 示例用法 preloadImage("image1.jpg", function() { console.log("image1.jpg 加載完成"); // 在這里更新頁面上的圖片顯示，或者執行其他操作 }); preloadImage("image2.jpg", function() { console.log("image2.jpg 加載完成"); });
這段代碼的關鍵在于，先檢查圖片是否已經加載完成。因為有些圖片可能已經存在于瀏覽器緩存中，直接設置src屬性后，complete屬性會立即變為true。如果沒有這個檢查，onload事件可能永遠不會觸發。
預加載圖片后如何避免重復加載？
預加載僅僅是提前下載圖片，并不能直接避免重復加載。要避免重復加載，需要配合瀏覽器緩存策略。如果服務器設置了合適的Cache-Control和Expires頭部，瀏覽器會自動緩存圖片，并在下次請求時直接從緩存中讀取，而不會再次向服務器發送請求。
如果服務器緩存策略不理想，或者你想更精細地控制緩存，可以考慮使用localStorage或sessionstorage來存儲圖片的base64編碼。不過，這種方法只適合小圖片，因為base64編碼會增加圖片的大小，而且localStorage和sessionStorage的容量有限。
function preloadImageWithCache(url, callback) { const img = new Image(); img.src = url; img.onload = () => { // 將圖片轉換為 base64 編碼 const canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0); const dataURL = canvas.toDataURL('image/jpeg'); // 可以選擇其他格式 // 存儲到 localStorage localStorage.setItem(url, dataURL); callback.call(img); }; img.onerror = () => { console.error("圖片加載失敗:", url); }; } // 使用緩存的圖片 function displayImage(url, elementId) { const cachedData = localStorage.getItem(url); if (cachedData) { const imgElement = document.getElementById(elementId); imgElement.src = cachedData; } else { // 如果緩存中沒有，則正常加載 const imgElement = document.getElementById(elementId); imgElement.src = url; preloadImageWithCache(url, () => { console.log("圖片加載并緩存完成:", url); }); } } // 示例 displayImage("image3.jpg", "myImage");
除了Image對象，還有哪些預加載圖片的方法？
除了Image對象，還可以使用css的background-image屬性來預加載圖片。將圖片的URL設置為一個隱藏元素的background-image，瀏覽器也會開始下載圖片。這種方法的優點是不需要JavaScript代碼，但缺點是無法監聽圖片的加載完成事件。
另外，還可以使用XMLHttpRequest或fetch API來下載圖片，然后將圖片數據轉換為Blob對象，并創建一個ObjectURL來作為圖片的URL。這種方法比較復雜，但可以更靈活地控制圖片的下載過程。
function preloadImageWithFetch(url, callback) { fetch(url) .then(response => response.blob()) .then(blob => { const imageUrl = URL.createObjectURL(blob); const img = new Image(); img.src = imageUrl; img.onload = () => { callback.call(img); URL.revokeObjectURL(imageUrl); // 釋放 URL 對象 }; img.onerror = () => { console.error("圖片加載失敗:", url); URL.revokeObjectURL(imageUrl); // 釋放 URL 對象 }; }) .catch(error => { console.error("圖片加載失敗:", url, error); }); } // 示例 preloadImageWithFetch("image4.jpg", function() { console.log("image4.jpg 使用 fetch 加載完成"); });
需要注意的是，使用URL.createObjectURL創建的URL對象，在使用完畢后需要調用URL.revokeObjectURL來釋放，否則可能會導致內存泄漏。
預加載大量圖片時，如何優化性能？
預加載大量圖片可能會對性能產生影響，特別是當圖片體積較大時。為了優化性能，可以考慮以下幾點：
- 限制并發請求數量：同時預加載的圖片數量不宜過多，可以設置一個并發請求數量的上限，避免一次性發送大量請求，導致瀏覽器阻塞。
- 使用懶加載：只預加載視口附近的圖片，當用戶滾動到其他區域時，再加載相應的圖片。
- 圖片壓縮：使用合適的圖片格式和壓縮算法，減小圖片體積。
- CDN加速：將圖片資源部署到CDN上，利用CDN的緩存和加速功能，提高圖片加載速度。
總的來說，圖片預加載是一個提升用戶體驗的有效手段，但需要根據實際情況選擇合適的方法，并注意優化性能，避免產生負面影響。
