在页面加载时显示AJAX Loader

hello I'm pretty new at javascript and don't know how to use it.

你好,我是javascript的新手,不知道如何使用它。

I want AJAX Loader to appear when a page loads and after loading is finished I want loader to dissapear. Can anyone post me a code for that?

我希望在页面加载时出现AJAX Loader,加载完成后我想让加载器消失。任何人都可以给我发一个代码吗?

4 个解决方案

#1

Generally this is done by showing/hiding a div or two over the top of your content. You can get a fancy loading gif from http://www.ajaxload.info/ to get you started. Then you'll want to place a DIV on your page:

通常,这是通过在内容的顶部显示/隐藏div或2来完成的。你可以从http://www.ajaxload.info/获得一个花哨的加载GIF来帮助你入门。然后你会想要在你的页面上放置一个DIV:

<div id="loading">
    <p><img src="loading.gif" /> Please Wait</p>
</div>

You'll want this hidden by default, so you'd need to add this CSS:

默认情况下你会想隐藏这个,所以你需要添加这个CSS:

#loading { display:none; }

You'd also want to setup the display for this too:

您还需要为此设置显示:

#loading { display:none; position:fixed; left:0; top:0; width:100%; height:100%;
       background-image:url("transparentbg.png"); }

The file transparentbg.png would be a 25x25 black PNG set to about 80% opaque. Next you would need a way to show and hide this with jQuery:

文件transparentbg.png将是25x25黑色PNG设置为约80%不透明。接下来,您需要一种使用jQuery显示和隐藏它的方法:

function showLoading() {
    $("#loading").show();
}

function hideLoading() {
    $("#loading").hide();
}

Now you can use this when you need to do something like querying an external page for data:

现在,您可以在需要执行诸如查询数据的外部页面之类的操作时使用此功能:

showLoading();
$.post("data.php", {var:"foo"}, function(results){
    $("content").append(results);
    hideLoading();
});

#2

You can display an image, e.g. this, as soon as you make the Ajax call and then hide the image when you get the response from the ajax call.

您可以显示图像,例如这个,只要你进行Ajax调用,然后在从ajax调用得到响应时隐藏图像。

#3

html:

<div style="display:none" id="dvloader"><img src="loading.gif" /></div>

javascript:

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

#4

https://preloaders.net/en/ajax_loader_script here you can find full description along with the loader animations in GIF, SVG and even APNG format

https://preloaders.net/en/ajax_loader_script在这里您可以找到完整的描述以及GIF,SVG甚至APNG格式的加载器动画

#1

<div id="loading">
    <p><img src="loading.gif" /> Please Wait</p>
</div>