网页中常用加载页面的实现原理

本文主要是来分析加载页面的实现原理，因为好的加载页面可以提高用户访问的兴趣度，也能让用户远离枯燥的等待；根据网页上各种加载页面，大概总结了下面几种比较常用的实现方法：

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），隐藏加载页面。