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>