• $(window).load(function(){})和$(document).ready(function(){})的区别


    以浏览器装载文档为例,在页面加载完毕后,浏览器会通过JavaScript为DOM元素添加事件。

    在常规的Javascript代码中,通常使用 window.onload = function(){} 的方式,而在jQuery中常使用的则是 $(document).ready(function(){}) 的方式。

    事实上,JavaScript原生的 window.onload = function(){} 等价于jQuery的 $(window).load(function(){}) ,而jQuery的 $(document).ready(function(){}) 则在JavaScript中没有原生对应事件。

    jQuery的 $(document).ready(function(){}) 是事件模块中最重要一个函数,可以极大的提高Web应用程序的速度。但需要注意的一点是,由于在 $(document).ready(function(){}) 方法内注册的事件,只要DOM就绪就会被执行,因此可能此时元素的关联文件未下载完。例如与图片有关的html下载完毕并且已经解析为DOM树了,但很有可能此时图片还没有加载完毕,所以例如图片的高度和宽度这样的属性此时不一定有效。

    要解决这个问题,可以使用jQuery中另一个关于页面加载的方法——load()方法。load()方法会在元素的onload事件中绑定一个处理函数,如果处理函数绑定给window对象,则会在所有内容 ( 包括窗口、框架、对象和图像等 ) 加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发。

    1.执行时机不同。

    JavaScript原生的 window.onload = function(){} 是必须等待网页中所有的内容加载完毕后 ( 包括图片 ) 才能执行的,因此jQuery的 $(window).load(function(){}) 也同样有着这样的特性,即必须等待网页中所有的内容加载完毕后 ( 包括图片 ) 才能执行。

    而jQuery的 $(document).ready(function(){}) 是只要网页中所有DOM结构绘制完毕后就执行,因此可能DOM元素关联的内容并没有加载完。

    2.编写个数限制不同。

    JavaScript的onload事件一次只能保存对一个函数的引用,他会自动用最后面的函数覆盖前面的函数,因为 window.load 是DOM2级事件。

    但jQuery的 $(window).load(function(){}) 却没有这样的限制,可以编写多个,根据编写的前后顺序依次执行,因为在这里jQuery的实现方式是DOM3级事件,而 $(document).ready(function(){}) 有着同样的特性。

    这两种方式都能够在页面加载后去做一些事情,可以根据不同的场景选用不同的方式。

    "后来我才知道,在很多的事情上努力都能有成效,但人与人之间的关系不行,能走到最后的其实一开始就是同路人。"

  • 相关阅读:
    [转]SubVersion 和 CVSNT在Windows下的安装及初步管理
    [Java20071101]JDK配置
    [English20071023]疯狂英语永恒不变的18条黄金法则
    [文摘20071020]富人和穷人的经典差异
    [English20071024]疯狂突破高中句型300句
    [文摘20071017]回家真好 (工作是为了生活)
    [文摘20071020]老婆和老妈掉水里终于有答案啦
    [转]flash与后台数据交换方法整理
    Repeater使用:绑定时 结合 前台JS及后台共享方法
    [文摘20071019]九九重阳节的来历 重阳节传说故事 重阳节的活动习俗 重阳节诗篇
  • 原文地址:https://www.cnblogs.com/yanggb/p/14209135.html
Copyright © 2020-2023  润新知