解决网页刷新时布局紊乱（jquery ready和load事件）

PC项目开发时遇到页面刷新时会出现2S左右的紊乱，会影响到用户体验；

那么要想直接给用户呈现一个完整的页面，而不在页面加载时就呈现给用户，一般要采用预加载，可以在整个页面都加载完毕时，然后再呈现给用户。

（页面加载时，最慢的还是一些脚本、图片，其中图片是主要问题）；

解决短暂的页面布局紊乱，可以使用jquery的load事件，如下：

$("#fullback").hide();

我的是一个大的div；一般直接写body就好；

也就是先把html的元素隐藏掉，接下来代码如下：

$(window).load(function () {
    $("#fullback").show();
});

在load事件的回调函数内让元素显示，这样就解决了！

面试中好多时候会问ready和load谁先执行？答案是ready先执行，load后执行；

要想知道为什么是ready先执行，就得明白DOM文档加载的步骤：

1：解析HTML结构；

2：加载外部脚本和样式表文件；

3：解析并执行脚本代码；

4：构造HTML，DOM模型；===》ready

5：加载图片等外部文件；

6：页面加载完毕；===》load

如上所示    ready事件针对的是document对象，在DOM结构绘制完成之后就会执行。这样能确保就算有大量的媒体文件没加载出来，JS代码一样可以执行。

而load事件可以针对window对象或者img这些部件加载元素，必须等到网页中所有内容全部加载完毕之后才被执行。