用JavaScript預載圖片不能正常工作

Question

我試圖用JavaScript來預加載圖片：

$(document).ready(function() { 
    preloadImages(
     ['../../Content/Resources/close_mouse_over.png', 
     '../../Content/Resources/close.png']); 
}); 

function preloadImages(sources) { 
     var image = new Array(); 
     for (var i = 0; i < sources.length; i++) { 
      image[i] = new Image(); 
      image[i].src = sources[i]; 
     } 
    } 

function mouseOverForImage(imgId, imgSrcs) { 
     document.getElementById(imgId).src = imgSrcs; 
    } 

在HTML：

<input type="image" src="../../Content/Resources/close.png" name="Action" value="Save" onmouseover="mouseOverForImage('close', '../../Content/Resources/close_mouse_over.png')" 
       onmouseout = "mouseOverForImage('close', '../../Content/Resources/close.png')" id="close" title = "Close" /> 

但是鼠標懸停後，請求仍然是發送到服務器。不僅僅在鉻中工作

Answer 1

正如我的評論中指出的那樣，您正在向preLoadImages方法傳遞一組數組。

因此，您將一個數組傳遞給image[i].src，這意味着它不會被加載。

嘗試

$(document).ready(function() { 
    preloadImages(
     ['../../Content/Resources/close_mouse_over.png', '../../Content/Resources/close.png']); 
}); 

function preloadImages(sources) { 
     var image = new Array(); 
     for (var i = 0; i < sources.length; i++) { 
      image[i] = new Image(); 
      image[i].src = sources[i]; 
     } 
    } 

function mouseOverForImage(imgId, imgSrcs) { 
     document.getElementById(imgId).src = imgSrcs; 
    } 

，或者，如果你想保持數組的數組，然後使用

function preloadImages(sources) { 
     var image = new Array(); 
     for (var i = 0; i < sources.length; i++) { 
      image[i] = new Image(); 
      image[i].src = sources[i][0]; 
     } 
    } 

編輯，在進一步的調查，一個可能的原因是preloadImages破壞預壓後image陣列圖像。

試試這個：

function preloadImages(sources) { 
    window.preloadedImages = new Array(); 
    for (var i = 0; i < sources.length; i++) { 
     window.preloadedImages[i] = new Image(); 
     window.preloadedImages[i].src = sources[i]; 
    } 
} 

該存儲窗口對象中的預載圖片，使他們能夠正確地預加載。

希望有幫助嗎？