使用jquery解决页面在加载时出现短暂的布局紊乱

一般在使用一些开源的JavaScript UI库，在页面 中加入了比较复杂一些的组件，每次在页面加载时，都有可能会产生短暂的页面布局紊乱（大概会持续2s左右），这样的效果会给用户一种不好的体验感。在实际的项目中，本人使用过jquery easyui做过级联菜单，但是jquery easyui的级联菜单有个问题，如果仅仅有少数的二级、三级菜单，加载一般不会出现短暂布局紊乱，但是如果子级菜单有那么6、7项，加载时就会出现布局紊乱了。下面主要来解决这个问题。

要想直接给用户呈现一个完整的页面，而不在页面加载时就呈现给用户（页面加载时，最慢的还是一些脚本、图片，其中图片是主要问题），一般要采用预加载，先把整个页面都加载完毕，然后在呈现给用户。jQuery里面具有两个常见而且熟悉的事件，一个是ready事件；另外一个是load事件。ready事件针对的是document对象，而load事件可以针对window对象或者img这些部件加载元素。要想解决短暂的页面布局紊乱，一般推荐优先使用load事件。在页面的head部分插入下面脚本：

	<script type="text/javascript">
	$("body").hide();
	</script>

即，先把整个文档的body部分隐藏起来，这时候用户就看不到页面有显示，当然，最后还是要把页面呈现给用户看的，那么时候给用户呈现呢？那就是load事件触发的时候。

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

这样一来，用户看到的就是预加载好的页面。

这里的解决方法仅仅适合于包含少量图片的页面，对包含大量图片的页面是不适用的。