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

最新推荐文章于 2022-02-09 08:41:53 发布

MRW456

最新推荐文章于 2022-02-09 08:41:53 发布

阅读量6.7k

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/MRW456/article/details/50283395

版权

Web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在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动态加载效果源码

MRW456

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Html未加载完成时实现动态加载效果

在html页面未加载完成时会有一段空白，增强用户体验的话，必须在未加载完成时实现动态效果效果如下:1、一个普通html页面，内容如下.loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999;
复制链接

扫一扫