如何檢查圖像是否加載？

我使用mjpeg格式顯示從IP攝像頭流。問題是流是不穩定的，我不知道它到底什麼時候開始，所以我需要以某種方式檢查圖像的網址，如果有例如> 5圖像，然後加載它。就像這樣，但在將其添加到頁面之前，請檢查url。如何檢查圖像是否加載？

目前我有：

$('#image_div').append('<img width="320" height="240" border="0" src="http://'+url+':'+port+'/?up" id="image">'); 
$('#image').load(function(){ 
    console.log($(this)); 
});

在控制檯，它看起來像：http://i.stack.imgur.com/iM88J.png

如果沒有流，我只接收的這一個。所以我需要以某種方式檢查它之前添加。

來源

2012-09-06 Andresh Podzimovsky

你的意思是「檢查圖像URL如果有> 5個圖像」。你想讀取遠程HTML頁面並計算IMG標籤嗎？ – David

@大衛http://en.wikipedia.org/wiki/Motion_JPEG –

所以你的意思是「檢查** **流網址」？你能發佈更多的標記/代碼嗎？ – David

這是我在過去使用的一個偉大的插件。大多數情況下，它在大多數瀏覽器中都能很流暢地運行

https://github.com/desandro/imagesloaded

來源

2012-09-06 13:03:54 samisadaka

我不知道這是什麼一樣：

$('#image_div').append('<img src="http://'+url+':'+port+'/?up">');

我從來沒有與MJPEG和JavaScript的工作，但我認爲這個URL是JPEG文件流。

無論如何，你可以創建圖像對象，它們加載到內存中，只要你想顯示他們。 F.ex：

var cache = []; 
$(new Image()).attr('src', 'http://'+url+':'+port+'/?up').load(function() { 
    // image loaded but not injected 
    cache.push(this); 
    if (cache.length == 5) { 
     // 5 images loaded, do something with cache array 
    } 
});

這是回答您的問題嗎？

來源

2012-09-06 13:49:21 David

如果裝5張圖片我只需要返回true和停止功能。如果對你來說不難，你能幫我解決這個問題嗎？ –

我不確定，但試試'$（this）.unbind（'load'）;' – David

如何檢查圖像是否加載？

回答

相關問題