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

Question

你好伙伴们刚刚遇到了一个问题。

我正在使用 click() 和 load() 函数在 css class

中获取我的内容

      $("#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 class 容器中，并且运行良好

我只想显示加载图像..就像加载....加载.....在内容加载之前.. 因为当我点击其中一个 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 调用是异步的。如果您使用同步调用它，它不会执行任何操作 animations/queries/callbacks（因为 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/

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

show loading image before the content loads through jquery or ajax

html

javascript

css

ajax

jquery