基于javascript实现页面加载loading动画

最新推荐文章于 2025-08-08 15:44:38 发布

qq_37480155

最新推荐文章于 2025-08-08 15:44:38 发布

阅读量6.7k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_37480155/article/details/54927893

本文介绍了如何利用JavaScript实现页面加载的loading动画，通过跟踪HTML逐行加载的过程，模拟展示0%到100%的加载进度，提升用户体验。虽然无法直接获取加载对象大小，但通过分割页面并动态插入节点，可以实现加载动画的效果。最后，当加载完成时，动画达到100%并自动隐藏。

页面loading动画能够更好的反应当前网页的加载进度情况，动画的形式从开始0%到100%完成网页加载这一过程可以给用户一个温馨的提示，用户体验很不错。

loading动画的制作非常容易，难点在于如何判断当前页面的加载进度，目前没有方法可以直接获取正在加载对象的大小。所以我们无法通过数据大小来实现0-100%的加载显示过程。

我们知道当页面加载时html代码是逐行进行加载的，因此我们可以通过这个特性来间接达到效果。

首先我们需要定义一个页面的加载动画：

@mixin hover($value:.2s){-webkit-transition: all $value;-o-transition: all $value;-moz-transition: all $value;transition: all $value;}
.loading{width: 0;height: 2px;background: #f00;position: absolute;top: 0;left: 0;@include:hover(1s);}

然后根据实际情况将当前页面分成若干份，然后插入相关节点如下：

<div class="div1"></div>
$('.loading').animate({'width':'20%'});
<div class="div2"></div>
$('.loading').animate({'width':'40%'});
<div class="div3"></div>
$('.loading').animate({'width':'60%'});
 ...

最后在页面的最底部让loading动画达到100%并隐藏动画即可：

$('.loading').animate({'width':'100%'}).fadeOut();