Удержание старого изображения, пока новое изображение не будет готово для обновления

Question

Я использую setInterval и функцию загрузки jQuery для периодического обновления тега изображения.

var refresh_days = setInterval(function() { 
  $('#box_name').load("dynamic.php");}, 1000 );

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

Можно ли как-нибудь дождаться полной загрузки нового изображения, а затем отобразить его, чтобы изображение мгновенно изменилось с точки зрения пользователя?

Мой целевой браузер - Chrome, и мне не нужно, чтобы он был совместим с IE.

Спасибо

Answer 1

Вы можете загрузить изображение в невидимый тег <img> и использовать событие «load» для обновления видимого тега.

$('#hiddenImage').attr('src', newImageUrl).load(function() {
  $('#realImage').attr('src', newImageUrl);
});

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

Если вы перезагружаете целый кусок материала, у вас будут проблемы, потому что действие «загрузить» обновит страницу, а затем браузер запустит транзакцию HTTP, чтобы удовлетворить неявный запрос "GET" в теге <img>. Поэтому вы можете сделать следующее:

1. Загрузите весь блоб в скрытый <div>
2. Иметь обработчик live (), ожидающий события "load" из тега изображения в скрытом div;
3. Реагируйте на событие «load», перемещая поддерево DOM из скрытого div в место, где вы действительно хотите.

Answer 2

Попробуйте вместо этого использовать метод get ...

$.get("dynamic.php", function(result){
                $("#box_name").replace(result);
            });

Answer 3

Я думаю, .load может вызывать у вас проблемы, поскольку вы фактически перезагружаете всю структуру HTML в этом разделе своего HTML-кода.

Вместо использования .load я бы попробовал использовать метод jQuery.ajax(). Прикрепите метод к параметру success, который берет возвращенное изображение и заменяет его поверх старого. Таким образом, вы просто используете CSS для замены изображения, а не манипулируете DOM.

Для получения дополнительной информации см. http://docs.jquery.com/Ajax/jQuery.ajax#options.