在通過jquery或ajax加載內容之前顯示加載圖像

Question

你好隊友只是遇到了問題。

我正在使用click（）和load（）函數在CSS類中獲取我的內容

      $("#feed").click(function(){
      $(".homefeed").load("feedcontainer.php");
          $("#elementcontainer").show();
      });

      $("#news").click(function(){
      $(".homefeed").load("n.php"); 
      $("#elementcontainer").show();
      });

       $("#info").click(function(){
      $(".homefeed").load("newinfo.php");
      $("#elementcontainer").hide();
       });

如您所見，當我單擊div時，便可以在.homefeed類容器中加載php文件內容，並且運行良好

我只想顯示一個加載圖像..例如加載..加載.....在內容加載之前..因為當我單擊這些div中的一個時，它會完美地加載到homefeed容器中，但要花一些時間所以我只想向用戶顯示一些加載圖像以保持他們的參與度

你猜怎么現在實現嗎？ 謝謝。

Answer 1

您可以使用jquery blockUI插件。 jQuery blockUI

Answer 2

試試這個： $(".homefeed").prepend(response); 更改為$(".homefeed").html(response)

$("#info").click(function (e) {
$("#loadimg").show(); 
jQuery.ajax({
            type: "POST", 
            url: "newinfo.php", 
            dataType:"text", 
            cache: true,
            success:function(response){
                $(".homefeed").html(response);
                $("#loadimg").hide(); 
            },
            });
    });

Answer 3

在jQuery AJAX調用中使用.beforeSend選項。 請注意，這僅在您的AJAX調用是異步的時才有效。 如果您使用同步調用它，它將不會執行任何動畫/查詢/回調（因為jQ忙於阻塞所有內容，直到您的調用回來）。

$.ajax({
  url: "http://myurl.dot.com.jpeg.image.file.chmtl.php.asp.cfm",
  async:false,
  cache: false,
  beforeSend: function( xhr ) {
    // do stuff here to do the 'loading' animation 
    // (show a dialog, reveal a spinner, etc)
  },
  done: function(data){
    //process response here
  }
})

http://api.jquery.com/jquery.ajax/