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

1、　　html代码和css样式如下图，这一块比较简单，也不是本文重点，代码可自行查看下图。

　　Tips：加载页面的动画效果是图标进行旋转，可根据实际情况修改成属于自己的动画效果（现在很多网页的动画效果都不错，可进行参考）。

2、　　实现原理是利用了定时器（setTimeout）功能，对加载页面显示3s（3000），然后消失隐藏。

　　Tips：缺点就是由于写死了显示时间，所以图片太大加载比较慢，会导致加载页面隐藏了，但是图片还未全部加载完；或者图片太小加载比较快，又会导致多等待时间。

1、　　html和css跟第一种方法共用，可自行查看上面的代码。

　　实现原理是利用了页面加载状态改变时的事件（onreadystatechange），判断readyState的状态如果是载入完成（complete），则隐藏加载页面。

1、　　html代码和css样式如下图，这一块比较简单，也不是本文重点，代码可自行查看下图。

　　Tips：只贴出不同于第一种方法的css样式。

2、　　实现原理是利用animate让滚动条先显示到90%（运行时间1s），然后判断readyState的状态如果是载入完成（complete），则让滚动条显示到100%并隐藏加载页面。

　　Tips：适合于打开就想要一个交互体验的用户。

1、　　html和css跟第三种方法共用，可自行查看上面的代码。

　　实现原理详细步骤如下：

　　1.首先使用$.each方法遍历图片数组（imgArray）来获取图片的地址（val）；

　　2.然后使用Image的onload方法，每加载完一张图片数量就加1（count++）；

　　3.最后使用animate显示滚动条的宽度（Math.round(count / len * 100) + '%'），实现滚动条一个动态加载的过程；当全部图片加载完毕后（count >= len），隐藏加载页面。

1、　　html代码和css样式如下图，这一块比较简单，也不是本文重点，代码可自行查看下图。

　　Tips：百分比的外框利用round进行旋转。

2、　　实现原理详细步骤如下：

　　1.首先使用$.each方法遍历图片数组（imgArray）来获取图片的地址（val）；

　　2.然后使用Image的onload方法，每加载完一张图片数量就加1（count++）；

　　3.最后把计算出的百分比（Math.round(count / len * 100) + '%'）替换span的html内容，实现百分比动态变化过程；当全部图片加载完毕后（count >= len），隐藏加载页面。