界面加载问题的处理-onreadystatechange事件

界面加载问题

今天制作了一个网页，因为背景图片比较大，加载较为缓慢（大约需要0.7-0.8s，而且是三分之一、三分之一地加载，卡顿肉眼可见）；而且网页中有延时动画，加载卡顿让界面的动画体验十分不好。因此通过查找资料，初步找到了解决办法（可能不是最好的方法，该方法在某些情况下并不适用）。

通过AJAX-onreadystatechange事件，可以让界面在所有组件加载完后再显示，这样就可以做到背景图片显示的时候已经是加载好的了。具体代码如下：

//界面全部加载完在显示
document.onreadystatechange = function () {  
    if (document.readyState == "complete") {
        //当加载完成时，界面显示
        document.body.style.display = "block"; 
    } else {
        //当未加载完成时，界面不显示
        document.body.style.display = "none";
    };
};

document.onreadystatechange用于监听页面加载过程中的状态，每当 readyState 改变时，就会触发 onreadystatechange 事件。
document.readyState有五种取值：

1. uninitialized ：默认状态（取值1）
2. loading ：加载开始（取值2）
3. loaded ：加载完成（取值3）
4. interactive ：加载完成但尚不可用（取值4）
5. complete ：所有数据已经准备好 （取值5）