Question

我想显示ajax加载图片。但不知道该怎么做。这是我工作的ajax脚本。请帮我集成ajax加载gif.thanks

$(function() { 
    $( "#slider" ).slider({ 
       stop: function(event, ui) {
              $.ajax({
              url: "ajax.php",
              cache: false,
              async: false,
             data: "",
                  success: function(html){
                $("#result_list").html(html);
              }
            });

         }
    });
});

Answer 1

$(function() { 
$( "#slider" ).slider({ 
   stop: function(event, ui) {
          $("#place_of_loading_image").show();
          $.ajax({
          url: "ajax.php",
          cache: false,
          async: false,
          data: "",
          success: function(html){ //got the data

            $("#place_of_loading_image").hide(); // hide ajax loader         
            $("#result_list").html(html);        // show downloaded content
          }
        });

     }
    });
});

#place_of_loading_image 是某个容器（例如 div ），在您希望loader.gif出现的位置。

<div id="place_of_loading_image" style="display:none"><img src="load.gif"/></div>

Answer 2

你看过blockui吗？ http://jquery.malsup.com/block/

$(function() { 
    $( "#slider" ).slider({ 
       stop: function(event, ui) {
          $.blockUI({ message: null });  //loading
              $.ajax({
              url: "ajax.php",
              cache: false,
              async: false,
             data: "",
                  success: function(html){
                  $.unblockUI(); //loading complete
                $("#result_list").html(html);
              }
            });

         }
    });
});

Answer 3

Ajax有api ajax启动和ajax停止，当ajax请求发送时这个apis触发器

 $(document).bind("ajaxStart.mine", function() {
      $("#image").html("<img src="loading.gif"/>");
    });

$(document).bind("ajaxStop.mine", function() {
  $("#image").html("");
});

使用类显示和隐藏图像。

Answer 4

在开始XHR之前，请显示加载图像。

在XHR的成功回调中，隐藏加载图像。

Answer 5

这样的事情会有所帮助。

在您的职能开始时：

jQuery('#processing').html( '<img src="/images/ajaxBigFlower.gif">' );
$('#submit').attr("disabled", true);

成功的部分功能：

jQuery('#processing').html( '' );
$('#submit').attr("disabled", false);

注意： <div id='processing'></div>应该在您的HTML中，您可以使用css在页面的任何位置设置此DIV的位置。并为要在处理时设置为禁用的提交按钮设置id='submit' ...

如何显示ajax加载图像

5 个答案: