前段时间在面试之前查找并整理了一下window.onload和$(document).ready(function(){})区别,今天有时间更到我的博客上,由于本人资历尚浅,如有不对的地方,还请指正。

原文出自:http://www.php100.com/html/program/jquery/2013/0905/5954.html

1、执行时间上的区别:window.onload必须等到页面内(包括图片的)所有元素加载到浏览器中后才能执行。而$(document).ready(function(){})是DOM结构加载完毕后就会执行。

2、编写个数不同:window.onload不能同时写多个,如果有多个window.onload,则只有最后一个会执行,它会把前面的都覆盖掉。$(document).ready(function(){})则不同,它可以编写多个,并且每一个都会执行。

3、简写方法:window.onload没有简写的方法,$(document).ready(function(){})可以简写为$(function(){})。

另外:由于在$(document).ready()方法内注册的事件,只要DOM就绪就会被执行,因此可能此时元素的关联文件未下载完,例如与图片有关的HTML下载完毕,并且已经解析为DOM树了,但很有可能图片还未加载完毕,所以例如图片的高度和宽度这样的属性此时不一定有效。

要解决这个问题,可以使用JQuery中另一个关于页面加载的方法---load()方法。load()方法会在元素的onload事件中绑定一个处理函数。如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发。如:$(window).load(function(){})=====window.onload = function(){}...

window.onload和$(document).ready(function(){})的区别的更多相关文章

  1. window.onload 和 $(document).ready(function(){})的区别

    这篇作为我的新的起点开始吧,发现年纪大了,记性就不好了,有些东西老是记了忘,忘了百度.在学一些新知识的时候也是这样的毛病,总是重复学习,这样效率真心差!所以决定开始认真写博客! 本来想封装一个预加载的 ...

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

    window.onload和$(document).ready()的区别,如下表所示   window.onload $(document).ready() 执行时间 在页面所有内容(图片.文件)加载 ...

  3. window.onload和document.ready的区别

    window.onload和document.ready虽然两个方法的运行效果都一样,但他们之间是存在着区别的: 一.从执行的时间 window.onload在dom文档结构加载完毕以后就可以执行,不 ...

  4. window.onload和$(document).ready()比较

    浏览器在页面加载完毕后,JS通常使用window.onload方法为DOM元素添加事件,而jQuery使用的是$(document).ready()方法.两者功能相似,但也有细微差异,下面简要对比一下 ...

  5. 转:jquery的$(function(){})和$(document).ready(function(){}) 的区别

    原文链接:https://www.cnblogs.com/slyzly/articles/7809935.html [转载]jquery的$(function(){})和$(document).rea ...

  6. JS的window.onload与JQuery的$(document).ready(function(){})的区别

    前段时间去面试被问及JS的加载(onload)与jQuery中加载(ready)方法的区别,瞬时懵逼了,关于这个知识点平时还真没怎么注意. 最近先来无事便查了一下资料, onload 事件(W3c上给 ...

  7. window.onload()和$(document).ready的区别( $(document).ready == $(function(){ }) )

    首先$(function(){}) 和 $(document).ready(function(){}) 是一个方法,$(function(){})为简写(用的多) $(document).ready和 ...

  8. 浏览器加载模式:window.onload和$(document).ready()的区别(详解)

    jQuery库文件是在body元素之前加载的,必须等待所有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到. 在延迟等待加载,JavaScript提供了一个事件为load,方法如下: wind ...

  9. window.onload()与$(document).ready()区别

    浏览器加载完DOM后,会通过javascript为DOM元素添加事件,在javascript中,通常使用window.onload()方法. 在jquery中,则使用$(document).ready ...

随机推荐

  1. Activity系列讲解---数据传递

    在Android中,不同的Activity实例可能运行在一个进程中,也可能运行在不同的进程中.因此需要一种特别的机制帮助我们在Activity之间传递消息.Android中通过Intent对象来表示一 ...

  2. FileUtil(from logparser)

    import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.ByteArrayOutputStream; ...

  3. 文件上传大小js判断

    function fileChange(target) { var fileSize = 0; if (isIE && !target.files) { var filePath = ...

  4. Mac 下locate命令使用问题WARNING: The locate database (/var/db/locate.database) does not exist.

    想在Mac下使用locate时,提醒数据库没创建: WARNING: The locate database (/var/db/locate.database) does not exist. To ...

  5. U盘安装centos7 无法进入安装界面,进入dracut命令的解决办法。

    最近想要装一个centos7 玩一玩,就从网上下了个镜像,用UltraISO制作了安装U盘,准备在旧电脑上装一个. 结果始终无法进入安装界面,而是进入了dracut命令行. 从网上找了解决方法:

  6. Ext.js细节:在MVC中处理Widget Column,GetCmp和ComponentQuery, Id和ItemId

    针对EXT.JS版本的演进,要不断的学习新的最佳实践方法. 比如,在定义组件时,尽管用itemid,而不是id. 在搜索组件时,尽量用ComponentQuery,而不是getCmp. 在MVC中处理 ...

  7. GTest Google的一种白盒单元测试框架 开源项目

    GTest为google开源的白盒单元测试跨平台测试框架,含丰富的断言.类型参数化测试.死亡测试.以及其他的测试选项设置.文件保存等,以下将对该项目C++的实现进行简要的分析,作为学习记录备份. 基本 ...

  8. PHP扩展安装mcrypt 提示没有可用包(No package php-mcrypt available)

    一.用CentOS的朋友基本在安装软件的时候默认都会想到用yum安装省事省时而且不会有错不需要担心依赖问题. php大部分的扩展都是可以再yum源里安装的,但是部分扩展是没有的,需要安装epel-re ...

  9. 【leetcode】Generate Parentheses

    题目简述: Given n pairs of parentheses, write a function to generate all combinations of well-formed par ...

  10. asp.net中获取本机的相关信息!(CPU、内存、硬盘序列号等)

    // 注意:首先要在项目bin目录中添加引用 System.Management using System;using System.Collections.Generic;using System. ...