zoukankan      html  css  js  c++  java
  • $(document).ready() 、 $('#id').load() 、window.onload 的区别

    今天做项目的时候遇到一个问题,结果死在了$(document).ready()、 $('#id').load() 、window.onload的区别上。然后,就整理一下,这三者的区别。

    参考文章:http://www.jb51.net/article/21628.htm     http://www.frontopen.com/900.html  http://blog.csdn.net/leobig/article/details/40737941

    先说$(document).ready()和window.onload的区别

    jQuery中的ready特指“DOM”全部加载完毕,也就是说,只要DOM加载完毕了,这个事件自然被触发了。
    所谓“DOM”加载完毕指整个页面的标签部分全部加载完毕,至于说某些标签内部可能还存在着一系列事件未完成(譬如img标签可能加载远处一个很大的bmp图片尚未加载完毕等情况)则被忽略。因此对于单纯设置某些Html标签的事件或者属性的绑定而言,在ready方法中显然比load更为适合

    load必须等到全部的标签都处于完成状态,包括img把图片全部加载完毕为止)。

    1.执行时间 

            window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 

            $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。 

    2.编写个数不同 
             window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 
             $(document).ready()可以同时编写多个,并且都可以得到执行 

    3.简化写法 
             window.onload没有简化写法 
             $(document).ready(function(){})可以简写成$(function(){});

    window.onload和$('#id').load() 是类似的

    ready事件:  

    ready事件在DOM结构绘制完成之后就绘执行。这样能确保就算有大量的媒体文件没加载出来,JS代码一样可以执行。  

    load事件:  

    load事件必须等到网页中所有内容全部加载完毕之后才被执行。如果一个网页中有大量的图片的话,则就会出现这种情况:网页文档已经呈现出来,但由于网页数据还没有完全加载完毕,导致load事件不能够即时被触发。  

    总结:  

    相信大家已经了解了ready与load的区别,其实如果页面中要是没有图片之类的媒体文件的话ready与load是差不多的,但是页面中有文件就不一样了,所以还是推荐大家在工作中用ready。  

    另外值得注意的是:

    $(document).load是错误的,因为“load”并不是document对象的一个内置的方法;如果要人为为某个标签对象增加一个自定义事件,在jQuery中你只能使用bind方法增加一个自定义的事件,然后必须使用trigger去人为触发这个自定义事件。

  • 相关阅读:
    FZU 2150 Fire Game
    POJ 3414 Pots
    POJ 3087 Shuffle'm Up
    POJ 3126 Prime Path
    POJ 1426 Find The Multiple
    POJ 3278 Catch That Cow
    字符数组
    HDU 1238 Substing
    欧几里德和扩展欧几里德详解 以及例题CodeForces 7C
    Codeforces 591B Rebranding
  • 原文地址:https://www.cnblogs.com/tfiremeteor/p/5719075.html
Copyright © 2011-2022 走看看