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去人为触发这个自定义事件。

  • 相关阅读:
    别老想着怎么用好RPC框架,你得多花时间琢磨原理
    业务代码真的会有这么多坑?
    mac全部看视频屏幕闪烁适用于白果黑果
    iterm2 proxy配置
    源端和目标端数据对比
    frp内网穿透,rdp远程连接Windows计算机
    frp rdp远程桌面
    按块提交抽取数据
    创建索引被锁ora-00054资源正忙,但指定以nowait方式
    2017-9-17C#笔记(方法,方法参数 ,foreach语句)
  • 原文地址:https://www.cnblogs.com/tfiremeteor/p/5719075.html
Copyright © 2011-2022 走看看