添加加载动画jQuery的AJAX .load（） [英] Add a loading animation to jquery ajax .load()

问题描述

目前，我有这个code，它是pretty的简单

  $（'#window'）.load（'http://mysite.com/mypage.php'）;
 

但它表明只有在满载和持续时间在#windows元素保持为空的内容。 我想说明一个加载图像，直到页面加载。我应该怎么办呢？ jQuery的网站解释说一无所知。 （据我所知）

解决方案

创建一个加载格设置第一。

 ＆LT; D​​IV ID ='loadingDiv'＆GT;
    请稍候...＆LT; IMG SRC ='路径，你的超级花式微调/＆GT;
 ＆LT; / DIV＆GT;
 

---

隐藏该div最初并附上code，以显示该div开始的AjaxCall时，隐藏这个当Ajax调用完成。

  $（'＃loadingDiv）。隐藏（）。ajaxStart（函数（）{
$（本）.show（）; //显示加载事业部
}）.ajaxStop（函数（）{
$（本）.hide（）; //隐藏加载DIV
}）;
 

修改
有一些问题，因此，格式化标签而回。添加这些了。<​​/ P>

I currently have this code and it's pretty simple

$('#window').load('http://mysite.com/mypage.php');

But it shows the content only after fully loaded and during that duration the #windows element remains empty. I want to show a loading image until the page loads. How should i do it? The jquery site explains nothing about it. (afaik)

解决方案

Create a loading div first.

 <div id='loadingDiv'>
    Please wait...  <img src='path to your super fancy spinner' />
 </div> 

---

Hide this DIV initially and attach the code to show this div when ajaxCall starts and hide this when ajax call completes.

$('#loadingDiv').hide().ajaxStart( function() {
$(this).show();  // show Loading Div
} ).ajaxStop ( function(){
$(this).hide(); // hide loading div
});

Edit
There was some issue in SO formatting tags a while back. Added those again.

这篇关于添加加载动画jQuery的AJAX .load（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！