Question

我使用mjpeg格式显示来自IP摄像头的流。问题是流不稳定，我不知道它何时开始，所以我需要以某种方式检查图像网址，如果有例如＆gt; 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

如果没有流我只收到其中一个。所以我需要在添加之前以某种方式检查它。

Answer 1

这是我过去使用的一个很棒的插件。大多数情况下，它在大多数浏览器中都能顺利运行

https://github.com/desandro/imagesloaded

Answer 2

我不确定这是做什么的：

$('#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
    }
});

这会回答你的问题吗？

如何检查图像是否已加载？

2 个答案: