需要一个页面加载器的建议(html内容)
需要一个页面加载器的建议(html内容)
提问于 2010-03-19 03:33:22
一位客户要求一个页面加载器，一个“有吸引力”的东西，让访问者知道内容已经在路上了。这适用于标准的html内容--文本、图像等。
我在网上看到过一些，但其中许多都是过时的，而且相当笨拙。我正在寻找的东西，是不是一个痛苦的实现，但仍然看起来不错。
提前谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2010-03-19 03:41:33
构建自己的应用程序并不难。您可以创建一个显示动画gif的页面，然后使用AJAX加载该页面。你可以通过搜索"AJAX加载图像“来获得一些很棒的加载gif。这对您来说可能很容易，也可能不太容易，但是如果您使用的是jQuery和PHP，那么这对我来说并不太难。
示例假设您有两个文件: test1.htm和test2.htm。您希望在test1上显示test2的内容(需要一些时间才能加载)(它应该包含快速加载的页面部分)。下面是我创建的两个文件(使用jQuery)：
test1.htm
<head>
<script language="javascript" type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.get('test2.htm', function(data) {
$('#Content').html(data);
});
});
</script>
</head>
<body>
<div id="Content" >
<img src="ajax-loader-image.gif" />
</div>
</body>
</html>test2.htm
<h2>Dynamically Loaded Content</h2>
<p>Hello World!</p>因此，这应该适用于您计划要做的事情。重要的是，您尝试将页面划分为加载速度较快的部分和加载较慢的部分。
Stack Overflow用户
发布于 2013-09-01 14:56:44
如果你想创建有吸引力的加载器，那么你应该通过漂亮的动画图像。但我建议你使用动画图像和jQuery的组合，因为在jQuery中有很多可用的动画。您可以通过以下链接查看更多详细信息，jQuery Animation API How to add loader
你的HTML就像-
<div class="loader"></div>你的CSS就像
.loader {
position: absolute;
margin: 0 auto;
z-index: 9999;
background: url('icon-loader.gif') no-repeat;
top: 50 px;
cursor: wait;
}你的javascript代码就像-
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(window).load(function(){
$('div.loading').fadeOut(1000);
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2472791
复制相关文章
相似问题
腾讯云开发者
