Javascript 在通过jquery或ajax加载内容之前显示加载图像

你好，伙计们，有个问题

我正在使用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时，我就能够将一个php文件内容加载到一个.homefeed类容器中，它工作得非常好

所有我想显示的加载图像..像加载..加载。。。。。在加载内容之前。。 因为当我单击其中一个div时，它会被完美地加载到homefeed容器中，但这需要一些时间，所以我只想向用户显示一些加载图像，让他们保持参与

你猜现在该怎么做？

---

谢谢。

您可以使用jquery blockUI插件

试试这个：

$（“.homefeed”）.prepend（响应）更改为
$（“.homefeed”）.html（响应）

在jQuery AJAX调用中使用
.beforeSend
选项。注意，这仅在AJAX调用是异步的情况下有效。如果您使用synchronous调用它，它将不会执行任何动画/查询/回调（因为jQ在您的调用返回之前正忙于阻止一切）

您尝试删除
返回false我甚至试过（.），但它仍然与另一个内容重叠。请提供您的html代码。或更改为
$（“.homefeed”）。前置（响应）
至
$（“.homefeed”）.html（响应）@AyanAman我不能完全理解你想要表达的观点。如果你对你的问题做了手脚（），我们会更容易理解你的问题。有没有办法通过load（）fn来解决@阿霍桑卡里马西克
$("#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(); 
            },
            });
    });

$.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
  }
})