页面加载时显示AJAX加载器

你好我很新的JavaScript，不知道如何使用它。页面加载时显示AJAX加载器

我想AJAX加载器加载网页时出现，并加载完成后，我想装载机dissapear。任何人都可以发布我的代码吗？

2012-02-09 Sandro Vardiashvili

什么是沿着加载完整的描述？你的意思是一个AJAX加载器？ – Jivings 2012-02-09 08:52:47

AJAX加载栏http://www.ajaxload.info/ – 2012-02-09 08:53:55

主要想法是，您将例如一个隐藏的动画GIF放到页面上。当ajax请求开始时，你显示图像，当它完成后，你再次隐藏图像...试试这种方式...有类似的问题已经有很多答案..看看[那个]（http://stackoverflow.com/a/1305304/617996）一个例子.... – PrimosK 2012-02-09 08:59:20

通常这是通过在内容顶部显示/隐藏一个或多个div完成的。你可以从http://www.ajaxload.info/得到一个花式加载gif来帮助你入门。然后，你要放置一个DIV您的网页上：

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

你会想这个隐藏在默认情况下，所以你需要添加这个CSS：

#loading { display:none; }

您也想要设置的显示器这也：

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

文件transparentbg.png将是一个25×25的黑色PNG设置为约80％不透明。接下来，您将需要一种方法使用jQuery来显示和隐藏这一点：

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

来源

2012-02-09 08:54:39 Frankline

非常感谢你！我得到了点 – 2012-02-09 08:56:09

@SandroVardiashvili那么你或许应该看看http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work – 2012-02-09 09:05:31

您可以显示图像，例如this，只要您进行Ajax调用，然后在您收到来自ajax调用的响应时隐藏图像。

来源

2012-02-09 08:53:51

谢谢，但你可以发布我的代码吗？ :( – 2012-02-09 08:54:33

HTML：

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

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

现在，当你需要做类似查询外部页的数据，你可以使用这个

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

来源

2012-02-09 08:55:04 mgraph

https://preloaders.net/en/ajax_loader_script在这里你可以找到与GIF，SVG装载机动画，甚至APNG格式

来源

2017-03-23 08:27:55

页面加载时显示AJAX加载器

回答

相关问题