本文主要是来分析加载页面的实现原理，因为好的加载页面可以提高用户访问的兴趣度，也能让用户远离枯燥的等待；根据网页上各种加载页面，大概总结了下面几种比较常用的实现方法：
1.利用定时器实现加载页面；
2.利用readyState判断实现加载页面；
3.利用滚动条+readyState判断实现加载页面；
4.利用滚动条+onload实现加载页面；
5.利用百分比增加+onload实现加载页面。
利用定时器实现加载页面
html代码和css样式如下图，这一块比较简单，也不是本文重点，代码可自行查看下图。
Tips：加载页面的动画效果是图标进行旋转，可根据实际情况修改成属于自己的动画效果（现在很多网页的动画效果都不错，可进行参考）。
实现原理是利用了定时器（setTimeout）功能，对加载页面显示3s（3000），然后消失隐藏。
Tips：缺点就是由于写死了显示时间，所以图片太大加载比较慢，会导致加载页面隐藏了，但是图片还未全部加载完；或者图片太小加载比较快，又会导致多等待时间。
利用readyState判断实现加载页面
html和css跟第一种方法共用，可自行查看上面的代码。
实现原理是利用了页面加载状态改变时的事件（onreadystatechange），判断readyState的状态如果是载入完成（complete），则隐藏加载页面。
利用滚动条+readyState判断实现加载页面
html代码和css样式如下图，这一块比较简单，也不是本文重点，代码可自行查看下图。
Tips：只贴出不同于第一种方法的css样式。
实现原理是利用animate让滚动条先显示到90%（运行时间1s），然后判断readyState的状态如果是载入完成（complete），则让滚动条显示到100%并隐藏加载页面。
Tips：适合于打开就想要一个交互体验的用户。
利用滚动条+onload实现加载页面
html和css跟第三种方法共用，可自行查看上面的代码。
实现原理详细步骤如下：
1.首先使用$.each方法遍历图片数组（imgArray）来获取图片的地址（val）；
2.然后使用Image的onload方法，每加载完一张图片数量就加1（count++）；
3.最后使用animate显示滚动条的宽度（Math.round(count / len * 100) + '%'），实现滚动条一个动态加载的过程；当全部图片加载完毕后（count >= len），隐藏加载页面。
利用百分比增加+onload实现加载页面
html代码和css样式如下图，这一块比较简单，也不是本文重点，代码可自行查看下图。
Tips：百分比的外框利用round进行旋转。
实现原理详细步骤如下：
1.首先使用$.each方法遍历图片数组（imgArray）来获取图片的地址（val）；
2.然后使用Image的onload方法，每加载完一张图片数量就加1（count++）；
3.最后把计算出的百分比（Math.round(count / len * 100) + '%'）替换span的html内容，实现百分比动态变化过程；当全部图片加载完毕后（count >= len），隐藏加载页面。
