jq方法中 $(window).load() 与 $(document).ready() 的区别

　　通过自学进入了前端的行列，只知道在js中，一开头就写一个：

window.onload = function(){ //doing sth}

　　然后所有的乱七八糟的代码全塞里面，大概知道window.onload就是等页面全加载后再执行，具体细节不知。

　　今天做项目时遇到一个问题，用的是jq，简单的道理是通过动态获取图片的高度（因为是手机端，宽高是自适应的），来调整图片下面main_body的top值（因为图片跟mian_body有需要拼接的地方），代码如下：

$(function(){
	var img_h = $(".ban").height();//ban的样式给的是一张图片
	$(".main_body").css({"top":img_h / 1.5});
	console.log(img_h);//查看读取的高度
	})

　　可发现，会出现获取的图片的高度为0的情况出现，想到可能会是图片还未加载完毕，jq代码就已经执行了。

　　于是网上查找了下$(document).ready()与$(window).load(). 发现好多好的博客文章，分享大家，感谢博主辛苦写博分享。

　　http://www.jb51.net/article/59154.htm

　　http://www.jb51.net/article/86155.htm

　　简单说：ready()方法 是针对dom结构加载完触发，我的理解是就是标签全部加载之后（不对请批评指正）；

　　　　　　load()方法 是需要页面完全加载完成才可以触发，所谓的完全加载完，不仅仅是dom结构加载完，还需要所有的链接引用都加载完才可以。比如页面中有大量图片，必须等每一个图片都加载完成，才叫完全加载完。

以下转别人的文字：

------------------------------------------------------------------------------------

　　先说load，load事件主要就是用来代替原生的window.onload，它只能用在两个场景下：

　　· window对象上。比如$(window).load(fn);。

　　· 带有URL的元素(images, scripts, frames, iframes)。比如$(“img”).load(fn);。

　　除此之外，任何元素都没有load事件，比如：$(document).load(fn);这是错误的写法，根本不会执行。

　　load事件需要页面完全加载完成才可以触发，所谓的完全加载完，不仅仅是dom结构加载完，还需要所有的链接引用都加载完才可以。比如页面中有大量图片，必须等每一个图片都加载完成，才叫完全加载完。

　　最重要的还没说，jQuery官方文档明确说明load事件的跨浏览器兼容性很差(It doesn't work consistently nor reliably cross-browser)。经过小菜测试，谷歌浏览器仅仅支持$(window).load(fn);，而火狐浏览器支持$(window).load(fn);和$(“img”).load(fn);。

　　所以，除非必要情况下，否则强烈不推荐使用load事件。

　　最后说说ready，ready事件可以加在任意元素上，比如$(window).ready(fn);、$(document).ready(fn);、$(“div”).ready(fn);等等。

　　ready事件不要求页面完全加载完，只需要加载完dom结构即可触发。

------------------------------------------------------------------------------------

　　于是我将原来的代码改动如下：

　　$(window).load(function(){
        var img_h = $(".ban").height();//ban的样式给的是一张图片
　　　　　$(".main_body").css({"top":(img_h * 362 / 415)}); 
　　　　　　console.log(img_h); 
　　})

　　试了很多次，不会出现获取不到高度的情况了；

　　猜想以下的代码也可以(未测试)：

　$('.ban').load(function(){
        var img_h = $(".ban").height();//ban的样式给的是一张图片
　　　　　$(".main_body").css({"top":(img_h * 362 / 415)});
　　　　　　console.log(img_h);
　　})

　　

　　他人博客上说少用.load()事件，那看来获取图片高度尽量少用，以后再研究这些情况。

　　

　　document与window的细节还需要深研究。为自己加油