通过自学进入了前端的行列，只知道在js中，一开头就写一个：
1 | window.onload = function(){ //doing sth} |
然后所有的乱七八糟的代码全塞里面，大概知道window.onload就是等页面全加载后再执行，具体细节不知。
今天做项目时遇到一个问题，用的是jq，简单的道理是通过动态获取图片的高度（因为是手机端，宽高是自适应的），来调整图片下面main_body的top值（因为图片跟mian_body有需要拼接的地方），代码如下：
1 2 3 4 5 | $(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结构即可触发。
------------------------------------------------------------------------------------
于是我将原来的代码改动如下：
1 2 | $(window).load(function(){ var img_h = $(".ban").height();//ban的样式给的是一张图片<br> $(".main_body").css({"top":(img_h * 362 / 415)}); <br><em id="__mceDel"> console.log(img_h); <br> })</em> |
试了很多次，不会出现获取不到高度的情况了；
猜想以下的代码也可以(未测试)：
1 2 3 4 5 | $('.ban').load(function(){ var img_h = $(".ban").height();//ban的样式给的是一张图片 $(".main_body").css({"top":(img_h * 362 / 415)}); console.log(img_h); }) |
他人博客上说少用.load()事件，那看来获取图片高度尽量少用，以后再研究这些情况。
document与window的细节还需要深研究。为自己加油
文章来源：https://www.cnblogs.com/zhu-shixin/p/6122974.html
支付宝扫码打赏
微信扫码打赏
如果本文对你有帮助，欢迎打赏本站
