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

Question 1

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

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

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

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

ajax image jquery load

0

Sergey Sypalo 18 Дек 2011 в 11:41

Answer

Я думаю, вы можете использовать событие ajaxStart и ajaxComplete (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/

0

hungneox 18 Дек 2011 в 12:09

Question 2

Я думаю, вы можете использовать событие ajaxStart и ajaxComplete (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/

0

hungneox 18 Дек 2011 в 12:09

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

1 ответ

Похожие вопросы

Новые вопросы

ajax