网页Loding效果的实现

想要实现loading效果,实现得了解两个文档属性

1、document.onreadystatechange   //页面加载状态改变

2、 document.readyState    //该属性描述了文档的加载状态。

这两个属性的具体信息在这里就不赘述了,文档里有详细的解说。下面直接上网页loading的实例

1、gif图显示loding效果




    
    通过加载状态事件
    


这里我拿了一些百度图片填充页面,然后给页面加了一 层遮罩层 ,最后将准备好的gif图放在页面最上面显示出来,这样子设置好了之后页面就一直是这个gif图,下面我们要用JS进行判断

页面就显示出来了。

2、用css3动画取代gif动图

CSS3的动画可以做很多事情,这里我们可以用动画来替代gif动图节省网络资源

    

3、顶部进度条loding效果

现在很常见的一种加载效果,就是顶部有一个加载条,对应网页加载的进度,这种loding效果其实就是再网页顶部设置一个 加载条,然后利用文档至上而下的加载方式来动态改变进度条的长度




    
    通过加载状态事件
    
    



4、根据网页加载情况而改变的百分比数字loding效果

这种就是根据网页的加载情况,然后去改变遮罩层的百分比数字,至于百分比如何判断每个网页都不一样


你可能感兴趣的:(HTML+CSS3,javaScript)