Как настроить загрузку изображения во время пост-обработки данных для jquery ajax? - PullRequest
Новая
       19

Как настроить загрузку изображения во время пост-обработки данных для jquery ajax?

2 голосов
/ 16 января 2012

Код jquery ajax: 

$("#id_btnpolls").click(function(){ 
    var valCheckedRadio = $('input[name=data[distributions]]:checked').val();
    //alert(valCheckedRadio);       

    $.ajax({
        type: "POST",
        url: "/pollanswers/checkpollanswers",
        data: "valCheckedRadio="+valCheckedRadio,       
        success: function(prm){
            //alert(prm);
            $("#id_color_polls").html(prm);
        }           
    });

})

Когда я нажимаю кнопку, данные отображаются примерно через 5 секунд. В течение этого периода кодирования я хочу добавить изображение загрузки. Как я могу это сделать?

Ответы [ 4 ]

4 голосов
/ 16 января 2012

Вот CSS + HTML, который я использую для загрузки своего изображения.Я использую jQuery, чтобы просто добавить класс, который изменяет непрозрачность с 1 на 0, в сочетании со свойством CSS-перехода для эффекта затухания.Фоновое изображение для #loader имеет размер 220px X 80px и представляет собой сплошной прямоугольник со скругленными цветами с текстом «loading» с правой стороны.Фактическое вращающееся изображение «ajax» имеет высоту 60px, так что относительное позиционирование и отрицательное поле находятся для центрирования изображения по вертикали. 

   #loader {
        width: 220px;
        height: 80px;
        position: fixed;
        top: 50%;
        left: 50%;
        z-index: -1;
        opacity: 0;
        background: url(assets/images/bg-loader.png) no-repeat center center;
        transition: all .5s ease-in-out;
        margin: -40px 0 0 -110px;
    }

    #loader img {position: relative; top: 50%; margin-top: -30px; left: 10px;}

    .loading #loader {z-index: 1000; opacity: 1.0}

И HTML (отсюда я получил loader.gif http://www.preloaders.net): 

    <div id="loader"><img src="<?php bloginfo('stylesheet_directory'); ?>/assets/images/loader.gif" /></div>

А потом ваш jQuery: 

$("#id_btnpolls").click(function(){ 
    var $body = $('body'),
         valCheckedRadio = $('input[name=data[distributions]]:checked').val();

    $body.addClass('loading');       

    $.ajax({
        type: "POST",
        url: "/pollanswers/checkpollanswers",
        data: "valCheckedRadio="+valCheckedRadio,       
        success: function(prm){
            //alert(prm);
            $("#id_color_polls").html(prm);
            $body.removeClass('loading');
        }           
    });

})
3 голосов
/ 16 января 2012

1) Удерживающий div для изображения, который обычно не виден.

Вы можете сделать это с помощью css, добавив visibility:hidden; (против visibility: visible;) или опционально с помощью display: none;

2) В обработчике кликов сделайте видимым это удержание div.
3) В обратном вызове done сделайте его снова невидимым.

Непосредственно из документов , 

var request = $.ajax({
  url: "script.php",
  type: "POST",
  data: {id : menuId},
  dataType: "html"
});

request.done(function(msg) {
  $("#log").html( msg );
  // hide your loading image div here
});
2 голосов
/ 16 января 2012

HTML и CSS-код, указанный в j-man86, хороши. Для jQuery вы можете использовать функцию beforeSend в вызове AJAX. beforeSend вызывается перед отправкой AJAX-запроса. Чтобы скрыть загрузочный образ, используйте функцию complete jQuery AJAX, которая вызывается после завершения запроса AJAX. Так что код будет выглядеть так: 

$("#id_btnpolls").click(function(){ 
    var $body = $('body'),
         valCheckedRadio = $('input[name=data[distributions]]:checked').val();

    $body.addClass('loading');       

    $.ajax({
        type: "POST",
        url: "/pollanswers/checkpollanswers",
        data: "valCheckedRadio="+valCheckedRadio,
        beforeSend: function(){
            $body.addClass('loading');
        },
        success: function(prm){
            //alert(prm);
            $("#id_color_polls").html(prm);
        },
        complete: function(){
            $body.removeClass('loading');
        }           
    });

})
2 голосов
/ 16 января 2012

Взгляните на плагин blockUI для jquery 

$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
...