JavaScript的：知道什麼時候圖像滿載

Question

如果我有一盞明燈：

<img src="http://example.com/beacon" /> 

我想被調用一次信標請求完成的方法。例如：

<script> 
    $("img.beacon").load(function() { 
     // do stuff knowing the beacon is done 
    }); 
</script> 

這可能嗎？它在jQuery中嗎？

Answer 1

當然。記住加載需要在src屬性之前添加。

$('<img />').load(function(){ 
    console.log('loaded'); 
}).attr('src', imgUrl); 

如果您已經定義那麼你堅持在窗口加載事件觸發，以確保圖像已回落電線在標記圖像標籤。

Answer 2

另一種選擇，如果它適合你：onload event在頁面或圖像加載後立即出現。

如：

<img ... onload="alert('test');" /> 

Answer 3

$('img.beacon').load() 

不會永遠正確工作，ussually我這樣做：

$.fn.imageLoad = function(fn){ 
    this.load(fn); 
    this.each(function() { 
     if (this.complete && this.naturalWidth !== 0) { 
      $(this).trigger('load'); 
     } 
    }); 
} 

上面的代碼還涵蓋了形象腳本之前完成加載的情況下被執行。在標記中定義圖像時會發生這種情況。

使用這樣的：

<img src='http://example.com/image.png' class='beacon' /> 
<script type='text/javascript'> 
$(document).ready(function(){ //document.ready not really necessary in this case 
    $('img.beacon').imageLoad(function(){ 
     //do stuff 
    }); 
}); 
</script> 

Answer 4

您可以使用onload事件，火災時，整個頁面加載完畢。

$(window).load(function(){ 
    //everything is loaded 
}); 

Answer 5

<script type="text/javascript"> 
    $().ready(function() { 

     $('img#beacon').attr('src', 'http://sstatic.net/so/img/so/logo.png') 
      .load(function() { alert('Image Loaded'); }) 
      .error(function() { alert('Error Loading Image'); }); 
    }); 
    </script> 

這將加載標誌＃1。

如果加載成功，警報（'Image Loaded'）;執行

如果失敗，警報（'Error Loading Image'）;執行

當然，其中任何一個都可以替換爲您自己的功能。

作爲新用戶，它拒絕了我的圖片標籤;但圖片標籤應該只包含id ='beacon'屬性;除非你想添加一個類。我們在代碼中設置'src'屬性，通常情況下，您要監視完成的圖像具有以編程方式設置的src值。

Answer 6

這裏有一個簡單的JavaScript代碼能夠在所有瀏覽器上運行：

var myImage = new Image(); 

myImage.onload = function() { 
    var image_width = myImage.width; 
    var image_height = myImage.height; 
    $('#pictureEl').html('<img width="'+ image_width +'" height="'+ image_height +'" src='+ myImage.src + '></img>');   
}; 

myImage.src = myUrl; 

一個jQuery的片斷必須做同樣的事情，引擎蓋下。