您的位置：首页 > Web前端 > HTML

Html未加载完成时实现动态加载效果

2015-12-13 15:28 656 查看

在html页面未加载完成时会有一段空白，增强用户体验的话，必须在未加载完成时实现动态效果

效果如下:

1、一个普通html页面，内容如下

<html>

<head>

<style>

.loader {

position: fixed;

left: 0px;

top: 0px;

width: 100%;

height: 100%;

z-index: 9999;

background: url('load.gif') 50% 50% no-repeat rgb(249,249,249);

}

</style>

</head>

<body>

<div id="loading" class="loader">

</div>

</body>

</html>

这样倒是有动态效果啦，可是它就一直显示着啦

2、当内容加载完成取消动态效果

<html>

<head>

<script src="jquery-1.8.3.js"></script>

<script language="javascript" type="text/javascript">

$(window).load(function() {

$("#loading").fadeOut("slow");

})

</script>

<style>

.loader {

position: fixed;

left: 0px;

top: 0px;

width: 100%;

height: 100%;

z-index: 9999;

background: url('load.gif') 50% 50% no-repeat rgb(249,249,249);

}

</style>

</head>

<body>

<div id="loading" class="loader">

</div>



</body>

</html>

这样就实现了动态加载效果，但是当加载内容过多的时候该方法就没有过多的意义啦

源码下载:html动态加载效果源码

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航