关于Jquery的$(function(){})的一些顿悟

每次写代码，总要为一些细节上的瑕疵耽搁许久，虽然可以选择性地绕过，但这种发现问题又不想办法去解决的感觉，就像，借用苏东坡的话就是：如蝇在舌，吐之方快！所以每次都被这样的小细节弄得心力交瘁，身心俱惫，一种将要发狂的感觉。

这次遇到的问题是一个用许多图片实现拼积木的那种相互交错补充效果，这需要动态获取图片所在列表的高度跟宽度。功能可以在火狐跟IE中顺利显现，但在谷歌浏览器中总是发生错乱。纠结许久，用各种调试工具也调了好久，终于调到是获取列表的宽度跟高度的出现问题，又进而发现问题的根本所在，就在$(function(){})这上面！

$(function(){
    var index=0;
    var _top=new Array(50,50,50);
    var _left=new Array(0,246,492);
    var maxHeight=0;
    moveItem();
    function moveItem(){
       $(".site-content li").each(function(){
       index=$(".site-content li").index(this)%3;
       $(this).css({"position":"absolute","left":_left[index]+"px","top":_top[index]+"px"});
       _top[index]=$(this).height()+_top[index];        
       });
       $.each(_top,function(key,val){
           if(val>maxHeight){
               maxHeight=val;
           }
           });
       $(".site-content").css("height",maxHeight+80+"px");
       }
})

 

都知道$(function(){})是$(document).ready(function(){})的简写，他是边加载边运行，并不是所有资源都加载完毕之后才运行，这就是问题所在：因为图片都还没有加载过来，所以就获取不到他们的高度跟宽度，所以就布局错乱了，这时只要改用原始的javascript中的 window.onload 就能正常运行了。修改后的代码如下：

window.onload=function(){
    var index=0;
    //只需3列，所以写死来
    var _top=new Array(50,50,50);
    var _left=new Array(0,246,492);
    var maxHeight=0;
    moveItem();
    function moveItem(){
       $(".site-content li").each(function(){
       index=$(".site-content li").index(this)%3;
       $(this).css({"position":"absolute","left":_left[index]+"px","top":_top[index]+"px"});
       _top[index]=$(this).height()+_top[index];        
       });
       $.each(_top,function(key,val){
           if(val>maxHeight){
               maxHeight=val;
           }
           });
       $(".site-content").css("height",maxHeight+80+"px");
       }
    }

至于火狐跟IE都能正常运行，可能是他们解析HTML的方式有些差异，探索后再写，容后修改！