jQuery получить изображение JPEG из IPCam - PullRequest
Новая
       17

jQuery получить изображение JPEG из IPCam

2 голосов
/ 13 января 2012

Будучи новичком в jQuery, я следовал учебному руководству на jQuery For Designers (J4D), как сказал Реттерберг, чтобы проверить это в этом посте Обновление изображения с веб-камеры с помощью ajax .

Изображения, которые я получаю от моей локальной IPCamera, отображаются правильно, но после каждой перезагрузки функции новое извлеченное изображение будет помещено ниже предыдущего извлеченного изображения. В результате я получаю страницу, на которой каждое извлеченное изображение размещено ниже друг друга. 

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
 $(document).ready(function() {
   var refreshId = setInterval(function() {
    url = 'http://xxx.xxx.xxx.xxx?randval=';
            var randval = Math.random();
            var img = new Image();
            $(img).load(function () {
                $(this).hide();
                $('#ipcam').removeClass('loading').append(this);
                $(this).show();
            }).error(function () {
            // notify the user that the image could not be loaded
            }).attr('src', url + randval);    
   }, 1000);
   $.ajaxSetup({ cache: false });
});

</script>
</head>
<body id="page">
    <div id="ipcam" class="loading">
    </div> 
</body>
</html>

Кто-нибудь знает, что я должен сделать, чтобы правильно разместить новое извлеченное изображение в контейнер div, называемый «ipcam»?

Ответы [ 2 ]

1 голос
/ 13 января 2012

Вы .append() изображение на div#ipcam без удаления предыдущего контента.Попробуйте это 

$('#ipcam').removeClass('loading').html("").append(this);
0 голосов
/ 03 февраля 2012

Вы должны использовать setTimeout () вместо setInterval ().

setTimeout обеспечит обновление изображения перед выполнением любого нового запроса.

setInterval будет отправлять новые запросы, даже если старые еще не завершены.Это может привести к проблемам с отображением, если запрос возвращается в неправильном порядке.Это также не очень эффективно, потому что это будет тратить пропускную способность зрителя на запросы, которые никогда не будут видны.

...