移动端页面加载进度条

1、为什么需要资源预加载？

大多时候，我们的页面并不是一次渲染完毕的，而是随着用户的操作，不断修改DOM节点，如果你动态插入了一个图片节点，那么浏览器要马上发一个http请求，把图片加载下来然后渲染在页面上，如果用户此时的网速不佳，那么加载这张图片可能就会消耗几秒钟时间，此时页面上什么都没有（白屏）。最坏的情况，如果你的应用图片很多，半天加载不出几张图，用户很可能就在白屏的那几秒走了。在游戏中更严重，主角的图片如果加载不出来，让用户玩空气去？

2、什么样的项目需要预加载资源呢？

视图/图片较多的专题页面，或者是需要逐帧图片来完成的动画效果，最好都要做预加载。

3、预加载的原理与加载进度的获取

原理其实也相当简单，就是维护一个资源列表，挨个去加载列表中的资源，然后在每个资源加载完成的回调函数中更新进度即可。

以图片为例：

  这个页面加载进度条严格来讲并不是文件加载的实时进度，因为我们只能在每个文件加载完成的时候执行回调，无法像timeline中那样拿到文件加载的实时进度。

  实际上计算方法就很简单了，当前加载完的资源个数/资源总数*100，就是加载进度的百分比了。

  $("img").size()：图片的资源总数。

预览：

接下来有请码码上场：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>移动端页面加载进度条</title>
</head>
<style type="text/css">
.loading{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: #fff;z-index: 88;}
.loading .pic{width: 100px;height: 100px;
text-align: center;
background: url('https://m-view.eol.cn/epaper_demo/images/loading.gif') no-repeat;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;background-size: 100%;}
.loading .pic span{ display: block;width:100%;position: absolute;top: 10px;left: 10px;}
.loading .pic {line-height: 64px;text-align: center;}
.page{text-align: center;}
.page h3{font-size: 50px;}
</style>
<body>
<!-- 进度条加载 -->
<div class="loading">
<div class="pic">
<span></span>
<p>0%</p>
</div>
</div>
<!-- 正式页面 -->
<div class="page">
<img src="https://www.baidu.com/img/bd_logo1.png?where=super"/>
<h3>只为成功找方法，不为失败找借口!</h3>
</div>
<script src="http://www.eol.cn/js/common/jquery/1.12.4/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
var img = $("img");
var num = 0;
img.each(function(i) {
var oImg = new Image();
oImg.onload = function() {
oImg.onload = null;
num++;
$(".loading p").html(parseInt(num / $("img").size() * 100) + "%");
if(num >= i) {
$(".loading").fadeOut();
}
}
oImg.src = img[i].src;
});
})

</script>
</body>
</html>
posted @ 2019-04-18 16:41  会吃鱼的猫123  阅读(1253)  评论(0)  编辑  收藏  举报