我正在尝试编写一些代码,以便在将文件pts.php加载到index.php上的#contentdiv(页面加载时)时,将显示一个加载gif,因为pts.php相当大,需要几秒钟的时间。我不希望人们开始垃圾邮件点击和刷新,试图让它发挥作用,因此有了gif。
我遇到的问题是,据我所知,gif根本没有显示。有没有办法测试它是否显示出来,如果没有,有人知道如何修复它吗?我已经通过CSS隐藏了div#loadingimagepage,这段代码位于带有脚本标记的index.php页面中:
$(document).ready(function(){
$('#loadingimagepage').show();
$("#content"). load ("pts.php");
$('#loadingimagepage').hide();
这就是#content-div:
<div id="content">
<div id="loadingimagepage">
<img src="images/ajax-loader.gif" />
</div>
</div>
如有任何帮助/提示,我们将不胜感激。非常感谢。
您的代码将在不等待加载完成的情况下进行处理。您需要在完成加载函数时放入$('#loadingimagepage').hide();
。
Ex
$("#content").load("pts.php", function(){
$('#loadingimagepage').hide();
});
你甚至可以测试你的加载是否成功,如果没有成功就通知用户(同时仍然隐藏加载gif)
$("#content").load("pts.php", function(passedSuccessVar){
$('#loadingimagepage').hide();
if(!passedSuccessVar) { alert("Error!Error! Danger Will Robinson");}
});
您目前拥有的:
$('#loadingimagepage').show(); //starts showing right away
$("#content"). load ("pts.php"); //starting loading content
$('#loadingimagepage').hide(); //hides the loading gif regardless of the previous function status
load
是异步的,因此您需要等待它完成。
你需要这样的东西:
$(document).ready(function(){
$('#loadingimagepage').show();
$("#content").load("pts.php", function(){
$('#loadingimagepage').hide();
});
});
您可以使用ajaxStart
和ajaxStop
函数来显示或隐藏加载图像。
每当要发送Ajax请求时,jQuery都会检查是否还有其他未处理的Ajax请求。如果没有正在进行中,jQuery将触发ajaxStart事件。此时将执行已向.ajaxStart()
方法注册的任何和所有处理程序。
$('#loadingimagepage').hide().ajaxStart(function() {
$(this).show();
}).ajaxStop (function(){
$(this).hide();
});
参考编号:http://api.jquery.com/ajaxStart/