document load 与document ready的区别

页面加载完成有两种事件

1.load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数

问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响

2.$(document).ready()是当DOM文档树加载完成后执行一个函数（不包含图片，css等）所以会比load较快执行

在原生的jS中不包括ready()这个方法，只有load方法就是onload事件

时间： 2024-08-27 02:16:48

document load 与document ready的区别的相关文章

$(document).ready() 、window.onload、body.Onload()、 $(window).load、image.onload的区别

首先说说window和document,直观上来讲,window代表的是浏览器窗口,而document代表的是浏览器窗口中加载的dom元素,进一步说,document是window的一个属性,window是最顶级的对象. 二者有啥区别呢?很好理解,假设现在有一个浏览器,里边加载的页面特别长,已经超出了一屏,当然,肯定会出现滚动条了,这时候,$(window).height()和$(document).height()是不相等的,document的高度肯定要比window的大,因为window窗口

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

<锋利的jQuery>上摘抄下来: window.onload $(document).ready() 执行时机必须等待网页中所有的内容加载完毕后(包括图片)才能执行网页中所有DOM结果绘制完毕后就执行,可能DOM元素关联的东西并没有加载完编写个数不能同时编写多个以下代码无法正确执行:window.load = function() { alert("test1"); }; window.load = function() { alert("test

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

jQuery库文件是在body元素之前加载的,必须等待所有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到. 在延迟等待加载,JavaScript提供了一个事件为load,方法如下: window.onload = function () {}; //JavaScript等待加载 $(document).ready(function () {}); //jQuery等待加载load和ready区别 window.onload $(document).ready() 执行时机必须等待网页

$(document).load(); $(document).ready();的执行顺序

$(document).load(); 当web页面以及其附带的资源文件,如CSS,Scripts,图片等,加载完毕后执行此方法. 常用于检测页面(及其附带资源)是否加载完毕. $(document).ready(); 当页面DOM对象加载完毕,web浏览器能够运行JS时,此方法即被触发.如果你想尽快执行JS,可以使用此方法.[在html的头部的script标签中的,不处于ready()中的JS代码将早于ready()执行] $(document).unload(); 此事件在停止浏览页面的时候

jquery load 和ready的区别

jQuery有3种针对文档加载的方法 $(document).ready(function() { // ...代码... }) //document ready 简写 $(function() { // ...代码... }) $(document).load(function() { // ...代码... }) 一.要了解两者的区别必须要搞清HTML页面的加载渲染的顺序,html页面到底是怎么加载? 1.解析HTML结构(当浏览器获得一个html文件时,会"自上而下"加载): 2

（2）window.load和ready的区别

1.执行时机: window.onload:必须等待网页全部加在完毕(包括图片等),然后再执行包裹代码 $(document).ready():只需要等待网页中的DOM结构加载完毕,就能执行包裹的代码 2.执行次数: window.onload:只执行一次,如果第二次,那么第一次的执行会被覆盖 $(document).ready():可以执行多次,第N次都不会被上一次覆盖 3.简写方案: window.onload:无 $(document).ready():$(function (){ });

document.body、document.documentElement和window获取视窗大小的区别

来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条). 对于Internet Explorer.Chrome.Firefox.Opera 以及 Safari: window.innerHeight – 浏览器窗口的内部高度 window.innerWidth – 浏览器窗口的内部宽度对于 Internet Explorer 8.7.6.5: document.

document.documentElement和document.body区别

body是DOM对象里的body子节点,即body标签, documentElement 是整个节点树的根节点root, 详细介绍请看本文,感兴趣的朋友可以参考下区别: body是DOM对象里的body子节点,即 <body> 标签: documentElement 是整个节点树的根节点root,即<html> 标签: 没使用DTD情况即怪异模式BackCompat下: document.documentElement.clientHeight=0 document.body.c

document.documentElement和document.body区别以及获取浏览器的宽高

原文:http://www.jb51.net/article/41410.htm 1.区别: body是DOM对象里的body子节点,即 <body> 标签: documentElement 是整个节点树的根节点root,即<html> 标签: 2.没使用DTD情况即怪异模式BackCompat下: 代码如下: document.documentElement.clientHeight=0document.body.clientHeight=618 使用DTD情况即标准模式CSS1