Использование AJAX / jQuery для обновления изображения

Это, вероятно, простой вопрос, но я в тупике и просто не знаю, с чего начать.

У меня есть PHP-скрипт (image_feed.php), который возвращает URL-адрес изображения. Каждый раз, когда вызывается этот URl, он возвращает последнее доступное изображение (изображение меняется каждые несколько секунд).

Я хочу, чтобы при загрузке страницы выполнялся AJAX-вызов image_feed.php, который возвращает последний URL. Этот URl затем вставляется в HTMl, заменяя соответствующий образ src.

Через 5 секунд я хочу, чтобы процесс повторился, а изображение обновилось. Однако я не хочу, чтобы изображение менялось местами до тех пор, пока оно не закончит загрузку, и я хочу избежать появления пробелов перед загрузкой нового изображения.

На данный момент у меня есть следующий jQuery, который просто загружает возвращаемое значение image_feed.php непосредственно в div с именем # image1. image_feed.php правильно отформатирован, чтобы предоставить HTML-тег изображения.

    $(document).ready(function(){
    var $container = $("#image1");
    $container.load('image_feed.php?CAMERA_URI=<?=$camera_uri;?>')
    var refreshId = setInterval(function()
    {
        $container.load('image_feed.php?CAMERA_URI=<?=$camera_uri;?>');
    }, 5000);

}); 

Это работает, но есть проблема. Я получаю пустое пространство размером с изображение в IE и Firefox каждый раз, когда изображение обновляется, потому что для загрузки изображения требуется некоторое время.

Я знаю, что мне нужно, чтобы image_feed.php возвращал простой URL-адрес изображения. Затем я использую jQuery для запроса этого URL, предварительно загружаю его, а затем заменяю его существующим изображением.

Однако я все еще изо всех сил пытаюсь добраться куда угодно. Может ли кто-то быть так любезен, чтобы дать мне несколько советов / помощь?

Ответы на вопрос(4)

Вы можете. Если вы хотите что-то перезагрузить, вы можете просто добавить поисковый запрос, чтобы он обновил источник.

Например, когда есть часто меняющееся изображение (например, капча), и вы хотите загрузить его снова, не обновляя браузер, вы можете сделать это следующим образом:

Исходный код:

<img src="captcha.png" alt="captcha" />

Обновленный код:

<img src="captcha.png?1" alt="captcha" />

Используемый здесь скрипт будет просто:

var d = new Date();
$('img').attr('src', $('img').attr('src') + '?_=' + d.getMilliseconds());

Надеюсь это поможет! :)

Я предлагаю вам использоватьjQuery "onImagesLoad" Plugin Это предоставляет вам обратный вызов, когда изображение закончило загрузку.

Когда вы получаете новый URL-адрес изображения с сервера, вы создаете новый<img объект сsrc="new_url_from_server" и прикрепить'onImagesLoad' обратный вызов к нему. Когда ваш обратный вызов вызван, ваше изображение завершило загрузку.

Теперь вы можете просто заменить "src" атрибут старого объекта img с помощью new_url_from_server. Поскольку новое изображение уже доступно в кеше, оно не будет загружено снова и будет немедленно отображено!

Кроме того, вы можете скрыть старое изображение и добавить это новое изображение в DOM (не требуется, если выше работает правильно)

Некоторые образцы голых костей могут быть такими:

<!DOCTYPE html> 
<html> 
<body> 
<img id='bla' src="10.jpg" />

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery.onImagesLoad.js"></script> 
<script type="text/javascript"> 
    $(function(){ 
        var img = $('<div><img src="http://myserverbla/images/verybig.jpg"></img></div>');
        img.onImagesLoad({ 
                all : allImgsLoaded 
            });

        function allImgsLoaded($selector){ 
            var allLoaded = ""; //build a string of all items within the selector 
            $selector.each(function(){ 
                $('#bla').attr('src','http://myserverbla/images/verybig.jpg');
            }) 
        } 
    }); 
</script> 

</body> 
</html>
Решение Вопроса
$(document).ready(function() {
    var $img = $('#image1');
    setInterval(function() {
        $.get('image_feed.php?CAMERA_URI=<?=$camera_uri;?>', function(data) {
            var $loader = $(document.createElement('img'));
            $loader.one('load', function() {
                $img.attr('src', $loader.attr('src'));
            });
            $loader.attr('src', data);
            if($loader.complete) {
                $loader.trigger('load');
            }
        });
    }, 5000);
});

Непроверенные. Код выше должен загрузить новое изображение в фоновом режиме, а затем установить атрибут src старого изображения при загрузке.

Обработчик события для загрузки будет выполнен только один раз..complete проверка необходима для браузеров, которые могли кэшировать загружаемое изображение. В таких случаях эти браузеры могут запускать или не запускатьload событие.

Учтите, что если вам нужно снова получить URL-адрес с сервера, для нового URL-адреса изображения вы можете сделать это следующим образом:

$.ajax({
  url: 'getnewimageurl.php',
  success: function(data) {
    $('img').attr('src', data);
  }
});

Сервер должен возвращать только новое имя изображения в нем. Например,PHP код должен быть таким:

<?php
    $images = array("jifhdfg", "jklduou", "yuerkgh", "uirthjk", "xcjhrii");
    die($images[date('u') % count($images)] . ".png"); // Get the random milliseconds mod by length of images.
?>

Ваш ответ на вопрос