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

 通过自学进入了前端的行列,只知道在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

转载请注明本文固定链接
喜欢 ()or分享