zoukankan      html  css  js  c++  java
  • 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的细节还需要深研究。为自己加油

      

  • 相关阅读:
    DNS服务器详解
    numpy学习
    test_pandas
    1.爬虫基本介绍
    数据分析介绍及软件使用 01
    3.解析库beautifulsoup
    jQuery UI vs EasyUI
    "file:///" file 协议
    Display:Block
    前端响应式设计中@media等的相关运用
  • 原文地址:https://www.cnblogs.com/zhu-shixin/p/6122974.html
Copyright © 2011-2022 走看看