移动端，预加载进度实现

Question

移动端，等图片全部加载完成后，再显示页面。应该是个百分比进度的实现

Answer 1

精确的进度不好控制的，你可以给一个提示在加载就好了
如一个转动的圈，进度条不停的滚动等

Answer 2

给每个图片都注册onload事件，每个图片加载结束之后给全局的count加一，当count等于img标签的数量的时候显示页面，这样的话也可以计算百分百

Answer 3

等图片加载完了再显示页面？
兄弟那你的客户得都跑了
不如来一个占位符图片预先家在，再等当前图片加载了替换掉

Answer 4

例如 这种

$(function() {

    var $elem =  $('img')

    var lg = $elem.length

    var num = 0

    $elem.load(function () {

      console.log(++num / lg)

    })

    

})

Answer 5

如果你是 H5 这种特别可控的项目，可以事先计算出来所有资源的体积然后通过侦听每个加载进度来呈现进度，比如用 preload.js。我有一个项目也是这么做的：悟空传 H5。

平时其它类型的项目，比如 SF 客户端，这样做比较麻烦，主要问题是你很难判定要加载的总资源的体积，或者实在没有必要。