php 如何在页面加载时显示ajax加载gif动画？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1305260/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show ajax loading gif animation while the page is loading?
提问by Rajasekar
I try to implement AJAX in my website. When the content of the div changepass is clicked then it should load changepass.template.php. Here is the code im using for that.
我尝试在我的网站中实现 AJAX。当 div changepass 的内容被点击时，它应该加载 changepass.template.php。这是我为此使用的代码。
$(function() {
$(".changepass").click(function() {
$(".block1").load("views/changepass.template.php");
return false;
});
My question is how to show GIF Animation (loading.gif) while the page changepass.template.php is fully loaded. Give me some code tips Please.
我的问题是如何在页面 changepass.template.php 完全加载时显示 GIF Animation (loading.gif)。请给我一些代码提示。
回答by kayteen
There are many approaches to do this. A simple way to do:
有很多方法可以做到这一点。一个简单的方法：
<div style="display:none" id="dvloader"><img src="loading.gif" /></div>
JS:
JS：
$(function() {
$(".changepass").click(function() {
$("#dvloader").show();
$(".block1").load("views/changepass.template.php", function(){ $("#dvloader").hide(); });
return false;
});
});
Edited display:blockto show()after suggestion from James Wiseman :)
根据 James Wiseman 的建议编辑display:blockto show():)
回答by JonB
To make it a little more robust, for example, you forget to add the
例如，为了使它更健壮一些，您忘记添加
<div style="display:none" id="dvloader"><img src="loading.gif" /></div>
to the html, you can also do this in jQuery, something like:
对于 html，您也可以在 jQuery 中执行此操作，例如：
var container = $.create('div', {'id':'dvloader'});
var image = $.create('img', {'src':'loading.gif'});
container.append($(image));
$("body").append($(container));
Which will add the div automatically.
这将自动添加 div。
Just fire this on the onclick button event.
只需在 onclick 按钮事件上触发即可。
Makes it a little less open to errors.
使它不太容易出错。
回答by James Wiseman
Rather that setting the style
而是设置风格
.css("display", "block");
Just use the .hide()and .show()methods.
只需使用.hide()和 。show()方法。
These account for the brower default stylesheet definitions for HTMl elements. You may not want to display 'block' for the image. There can be loads of different possible display styles for an element:
这些解释了 HTMl 元素的浏览器默认样式表定义。您可能不想为图像显示“块”。一个元素可以有多种不同的显示样式：
回答by TheVillageIdiot
you can call some method to show loading gif after calling load and hide it using callback in load function:
您可以在调用 load 后调用一些方法来显示加载 gif 并使用 load 函数中的回调隐藏它：
$(function() {
$(".changepass").click(function() {
$("#gifImage").show();
$(".block1").load("views/changepass.template.php",null,function(){
$("#gifImage").hide();
});
return false;
});
