загрузка изображения jquery

Question

У меня есть такой код:

<div id="gallery">
   <img src="image1.jpg">
   <img src="image2.jpg">
   <img src="image3.jpg">
</div>

Я хочу показать стандартный (для запросов ajax) анимированный GIF во время загрузки изображения и при загрузке показать полное изображение.

Только1 требование, которое хочет сохранить текущую разметку и выполнить все необходимые манипуляции для загрузки в отдельном блоке скрипта

Answer 1

Я думаю, что вы можете использовать ajaxStart и ajaxComplete event (jQuery)

<div id="indicator"><img src="/path/to/your/image.gif"/></div>

И

$("#indicator").bind("ajaxStart", function(){
    $(this).show();
});

$("#indicator").bind("ajaxComplete", function(){
    $(this).hide();
});

Когда вы используете $ .ajax или $ .post, он будет показывать и скрывать загрузчик автоматически, когда запускается ajax-запрос и когда он останавливается.

Или, если вы используете XmlHttpRequest, вы можете на основе readyState объекта XmlHttpRequest установить изображение индикатора.

Например:

xmlHttp.onreadystatechange=function(){ 
    if (xmlHttp.readyState==4){ 
        document.getElementById("yourDiv").innerHTML=xmlHttp.responseText;
    }else if(xmlHttp.readyState==3){
        document.getElementById("yourDiv").innerHTML="<img src='loader.gif' />Loading...";
   }
}

с ReadyState как:

• 0 Неинициализировано: начальное значение.
• 1 Open: метод open () был успешно вызван.
• 2 Отправлено: UA успешно завершил запрос, но данные еще не получены.
• 3 Прием: непосредственно перед получением тела сообщения (если есть). Все заголовки HTTP были получены.

Источник: http://www.w3.org/TR/2006/WD-XMLHttpRequest-20060405/