Индикатор загрузки Ajax - PullRequest
1 голос
/ 11 марта 2011

Мой код this ajax snpped работает нормально, но как я могу отобразить загрузочное изображение в div? по тому же сценарию.

$.ajax({
         url:'ajax_image_refresher.php?'+$('#frm_text').serialize(),
         method:'get',
         success:function(data){
         if(data =='') return;
         img_tag = '';
         $('#wapal').html(img_tag);
       }

Ответы [ 3 ]

2 голосов
/ 11 марта 2011
<div id="displayStatus"></div>

jQuery('#displayStatus').html('Loading');

jQuery.ajax({
    //options
    success:function()
    {
       //your codes
       jQuery('#displayStatus').html('Loaded').delay(2000).fadeOut();
    }
});
1 голос
/ 11 марта 2011

Таким же образом, как вы определяете обратный вызов success, вы можете определить обратный вызов beforeSend.

Если у вас есть скрытое изображение где-то на вашей странице

<div id="loader" style="display: none;" >
   <img src="/images/my_groovy_ajax_loader.gif" />
</div>

выможет установить его visiblitiy в методе beforeSend и снова скрыть его в обратном вызове succes:

$.ajax({
     url:'ajax_image_refresher.php?'+$('#frm_text').serialize(),
     method:'get',
     beforeSend: function() {
        $("#loader").show();
     }
     success:function(data) {
        if(data =='') return;
        img_tag = '';
        $('#wapal').html(img_tag);
        $("#loader").hide();
   }
});

. Для получения дополнительной информации вы можете обратиться к документации jQuery ajax .

0 голосов
/ 11 марта 2011
function performAjaxRequest() {
    // First, put the ajax loading indicator in the div.
    $("#wapal").append("<img>", { src: "ajaxLoader.gif", className: "loader"});

    // Request the new data via ajax.
    $.ajax({
        url: "whatever.wht",
        method: "get",
        success: function(data) {
            // Remove the loading indicator.
            $("#wapal").find("img.loader").remove();

            // Carry on with your function.
            //  ...
        }
    });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...