добавление анимированного изображения во время работы jquery ajax - PullRequest
Новая
       27

добавление анимированного изображения во время работы jquery ajax

0 голосов
/ 20 июня 2011

Я использую Jquery Ajax, мой код выглядит так 

 $.get(
    'GetPage.aspx',
    'url=' + url ,
    function (response) {
        if (!cancelNavigationFlag)
            setIframeHtml(response);
        cancelNavigationFlag = false;
    },
    'html'
);

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

Как я могу это сделать?

Ответы [ 3 ]

2 голосов
/ 20 июня 2011

У меня другая логика и решение.

Установите div, где вы хотите, чтобы изображение GIF отображалось как <div id="loader">.

Далее установите фоновое изображение в CSS и не устанавливайте ссылку на изображение, как;

background: no-repeat center;

и при выполнении ajax передайте ему фоновое изображение loader.gif и удалите его после завершения задачи ajax, например; 

 $.get(
    $("#loader").css({ 'background-image':'url(images/loader.gif)' });
    'GetPage.aspx',
    'url=' + url ,
    function (response) {
        if (!cancelNavigationFlag)
            setIframeHtml(response);
        cancelNavigationFlag = false;
        $("#loader").css({ 'background-image':'url()' });
    },
    'html'
);

Я сам не проверял .. Надеюсь, это поможет ..

1 голос
/ 20 июня 2011

Я обычно делаю что-то вроде этого: 

$("#indicatordiv").show();
$.post("somepage", function(result){ 
    $("#indicatordiv").hide();
})

Где "indicatordiv" - простой элемент div, содержащий изображение gif загрузчика.

Так что в вашем случае просто ".show ()" элемент перед запросом get и ".hide ()" внутри функции response.

0 голосов
/ 20 июня 2011

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

$("#dvLoader").show();
$.get(
    'GetPage.aspx',
    'url=' + url ,
    function (response) {
        if (!cancelNavigationFlag)
            setIframeHtml(response);
        cancelNavigationFlag = false;
    },
    'html'
    success:
         function(data)
         {
            $("#dvLoader").hide();
         }

);

dvLoader содержит образ загрузчика.

...