Saturday, June 13, 2009

Обновление картинки без перезагрузки HTML страницы

Постановка задачи:
Картинка на странице подгружается с php скрипта.
Допустим пользователь изменил картинку которая хранится на сервере (например зааплодил новую с помощmю плагина Uploadify), нужно теперь без перезагрузки страницы обновить картинку с того самого php скрипта.

Похожие задачи:
При создании простенькой галереи, когда пользователь аплодит картинку и нужно эту картинку отобразить, или например при создании скрипта каптчи, или когда пользователь меняет логотип в своем профайле и т. д.

Так вот, приведу пример refresh картинки на jquery

код примерно такой:

<div id="img_container">
<img src="http://site.com/img.php?img_id=1" />
</div>

<input type="button" onclick="refresh_my_img();">

<script type="text/javascript">
function refresh_my_img()
{
time = new Date();
var rand = time.getTime();
var new_src = "http://site.com/img.php?img_id=1"+"&add_param="+rand;
$("#business_logo_img").empty();
var i = new Image();
i.src = new_src;
$("#business_logo_img").append(i);
}
</script>

В данном случае, удаляется тег img и создается новый с другим src.
ОСОБОЕ ВНИМАНИЕ хочу обратить на новый ресурс картинки, в url адрес добавился новый параметр add_param=rand где rand типа случайное уникальное число.
Это сделано для того, чтобы браузер не считал что адрес картинки старый.
Если бы мы для картинки просто подставили бы старый url (url того же php скрипта, который был до этого), то браузер посчитал бы что картинка старая, и не обновил бы её, а так, с помощью левого параметра, мы просто подставляем картинке уникальный новый url, это заставит браузер послать запрос на php скрипт, который в свою очередь вернет нам новую картинку. В самом же скрипте новый параметр обрабатывать не нужно.

Эта статья полезна для тех случаев, когда картинка возвращается php скриптом. (Не забывайте, что скрипт при выводе картинки должен выводить необходимые headers)