移动端页面加载进度条

时间 2019-11-17

标签移动页面加载进度栏目无线繁體版

原文原文链接

一、为何须要资源预加载？

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

二、什么样的项目须要预加载资源呢？css

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

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

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

以图片为例：浏览器

这个页面加载进度条严格来说并非文件加载的实时进度，由于咱们只能在每一个文件加载完成的时候执行回调，没法像timeline中那样拿到文件加载的实时进度。函数

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

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

预览：spa

接下来有请码码上场：

<!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>