已使用jquery加載支票圖像

Question

問題 - 在運行時，我正在使用jquery更改/替換某些圖像的src屬性。這些圖像默認是隱藏的。我想在下載這些圖像並準備顯示時顯示這些圖像，因爲某些圖像也可能無法下載。

  <img id="pic_1" width="153" height="160" border="0" 
       onmouseout="this.style.border='2px solid #FFFFFF';" 
        onmouseover="this.style.border='2px solid #4585E7';" 
             style="visibility: hidden;" 
             src="**to be replaced at run time**""> 

請讓我知道任何解決方案我該如何做到這一點。

Answer 1

我相信你可以使用Load event這個。

喜歡的東西：

$('#myImage').load(function() { 
    //called when image is loaded 
}); 

Here is a working example

Here is an example with delayed loading

Answer 2

$('#imgId').load(function(){ 
alert('Image Loaded') 
}); 

Answer 3

除了musefan的答案，如果你需要用它來緩存圖片以及工作，你需要的東西超過load()

檢查https://github.com/desandro/imagesloaded。這是一個jQuery插件，可以在圖像加載時觸發回調。它也適用於緩存的圖像。

檢查jQuery event for images loaded瞭解更多信息。

Answer 4

此代碼將鉤住您在網站上獲得的每個圖片，並且類爲「預加載」。

$(function(){ 
    //Hide all pictures first (You could here work on some loading animations if you want) 
    $("img.preload").css("display", "none"); 

    //When the image is loaded, show it again 
    $("img.preload").load(function(){ 
     $(this).css("display", "block"); 
    }); 
});