Использование 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-тег изображения.

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

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

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

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

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



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

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

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

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

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

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



Я предлагаю вам использовать[jQuery "onImagesLoad" Plugin](http://archive.plugins.jquery.com/project/onImagesLoad)
Это предоставляет вам обратный вызов, когда изображение закончило загрузку.

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

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

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

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



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

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