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

时间:2015-01-10 13:44:06

标签: javascript jquery html css 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然后我能够在.homefeed类容器中加载一个php文件内容并且它运行正常

所有我想要显示一个加载图像..像加载....加载.....在内容加载之前.. 因为当我点击其中一个div然后它被完美地加载到家庭饲料容器中但它需要一些时间所以我只是想向用户显示一些加载图像以保持它们的参与

任何猜测现在如何实现它? 谢谢。

3 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

试试这个: $(".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(); 
            },
            });
    });

答案 2 :(得分:0)

在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/