jQuery的：檢查的圖像加載完畢

Question

可能重複：
Browser-independent way to detect when image has been loaded

如何檢查映像是否由客戶端完全下載後，這樣我可以使用它像一個格式：

<script type="text/javascript"> 
function doSomething(){ 
//doing something already 
    if(image has finished loading) { 
     alert("The image has been downloaded"); 
    } 
    else { 
     //do something else 
    } 
} 
</script> 

謝謝

Answer 1

您可以使用load：

$img.load(function() { 
    // image is loaded 
}); 

如果你有問題，上加載window.load而不是document.ready的代碼。

Answer 2

<span id="result"></span> 
</p> 

<script type="text/javascript"> 

    $('#image1') 
    .load(function(){ 
     $('#result').text('Image is loaded!'); 
    }) 
    .error(function(){ 
     $('#result').text('Image is not loaded!'); 
    }); 

</script> 

Answer 3

嘗試類似的東西 - ：

<script type ="text/javascript"> 
    var imageLoaded = false; 

    $(document).ready(function(){ 

     $("img").load(function(){ 
      imageLoaded = true; 
     }); 
    }); 


    function doSomething(){ 
     //doing something already 
     if(imageLoaded) { 
      alert("The image has been downloaded"); 
     } 
     else { 
      //do something else 
     } 
} 

</script> 

Answer 4

只使用負載回調函數的所有論題的解決方案並不像有時負載不會解僱已緩存的圖片或破裂的人完全準確。 有很多嘗試儘可能簡單地檢測這種行爲，並且我可以告訴你，最好的方法是使用由Desandro加載的非常明亮的插件圖像。

你可以在這裏看到：https://github.com/desandro/imagesloaded/blob/master/jquery.imagesloaded.js