如何在页面加载时显示ajax加载gif动画？

发布于 2024-08-02 05:21:50 字数 326 浏览 4 评论 0原文

我尝试在我的网站中实现 AJAX。当单击 div Changepass 的内容时，它应该加载changepass.template.php。这是我为此使用的代码。

 $(function() {
   $(".changepass").click(function() {
    $(".block1").load("views/changepass.template.php");
    return false;
 });

我的问题是如何在页面changepass.template.php完全加载时显示GIF动画（loading.gif）。请给我一些代码提示。

原文

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.

 $(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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

鹿! 2024-08-09 05:21:50

有很多方法可以做到这一点。
一个简单的方法：

<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 的建议将 display:block 编辑为 show() :)

There are many approaches to do this.
A simple way to do:

<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;
    });
});

Edited display:block to show() after suggestion from James Wiseman :)

回复收藏 0 原文

谁把谁当真 2024-08-09 05:21:50

为了使它更健壮一点，例如，您忘记将 the 添加

<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 按钮事件上触发它即可。

使其不太容易出错。

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:

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.

Just fire this on the onclick button event.

Makes it a little less open to errors.

回复收藏 0 原文

刘备忘录 2024-08-09 05:21:50

而不是设置样式

.css("display", "block");

只需使用 .hide() 和 .show() 方法。

这些说明了 HTMl 元素的浏览器默认样式表定义。您可能不想显示图像的“块”。一个元素可以有多种可能的显示样式：

http://www.w3schools.com /htmldom/prop_style_display.asp

Rather that setting the style

.css("display", "block");

Just use the .hide() and .show() methods.

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:

http://www.w3schools.com/htmldom/prop_style_display.asp

回复收藏 0 原文

霊感 2024-08-09 05:21:50

您可以在调用 load 后调用一些方法来显示加载 gif 并使用 load 函数中的回调隐藏它：

$(function() {
   $(".changepass").click(function() {
    $("#gifImage").show(); 
    $(".block1").load("views/changepass.template.php",null,function(){
            $("#gifImage").hide();
    });
   return false;
});

you can call some method to show loading gif after calling load and hide it using callback in load function:

$(function() {
   $(".changepass").click(function() {
    $("#gifImage").show(); 
    $(".block1").load("views/changepass.template.php",null,function(){
            $("#gifImage").hide();
    });
   return false;
});

回复收藏 0 原文

~没有更多了~