[英]How to show ajax loading gif animation while the page is loading?
我尝试在我的网站上实现AJAX。 当单击div changepass的内容时,它应该加载changepass.template.php。 这是我正在使用的代码。
$(function() {
$(".changepass").click(function() {
$(".block1").load("views/changepass.template.php");
return false;
});
我的问题是如何在页面changepass.template.php完全加载时显示GIF动画(loading.gif)。 给我一些代码提示请。
有很多方法可以做到这一点。 一个简单的方法:
<div style="display:none" id="dvloader"><img src="loading.gif" /></div>
JS:
$(function() {
$(".changepass").click(function() {
$("#dvloader").show();
$(".block1").load("views/changepass.template.php", function(){ $("#dvloader").hide(); });
return false;
});
});
编辑后的显示:在James Wiseman的建议后阻止 显示() :)
例如,为了使其更加健壮,您忘记添加
<div style="display:none" id="dvloader"><img src="loading.gif" /></div>
对于html,你也可以在jQuery中执行此操作,例如:
var container = $.create('div', {'id':'dvloader'});
var image = $.create('img', {'src':'loading.gif'});
container.append($(image));
$("body").append($(container));
这将自动添加div。
只需点击onclick按钮事件即可。
使错误变得不那么开放。
而是设定风格
.css("display", "block");
只需使用.hide()
和。 show()
方法。
这些解释了HTMl元素的更广泛的样式表定义。 您可能不希望为图像显示“阻止”。 元素可以有许多不同的可能显示样式:
你可以在调用load之后调用一些方法来显示加载gif并在load函数中使用回调来隐藏它:
$(function() {
$(".changepass").click(function() {
$("#gifImage").show();
$(".block1").load("views/changepass.template.php",null,function(){
$("#gifImage").hide();
});
return false;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.