添加加载动画到jquery ajax .load()

Question

我目前有这个代码,它很简单

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

但它仅在完全加载后显示内容,并且在此期间#windows元素保持为空.我想在页面加载之前显示加载图像.我该怎么办？jquery网站对此一无所知.(据我所知)

Answer 1

loading首先创建一个div.

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

最初隐藏此DIV并附加代码以在ajaxCall启动时显示此div并在ajax调用完成时隐藏它.

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

编辑
前一段时间SO格式标签中存在一些问题.再次添加.

Answer 2

为此,您必须使用gif图像.首先将#window的html更改为gif图像,直到加载内容为止

工作守则

$('#window').html("<img src="image_url" />").load('http://mysite.com/mypage.php');