`
- 浏览:
13162 次
- 性别:
- 来自:
上海
-
本节内容主要收集一些有关DOM文档ready有关的一些知识。
onload事件:是在网页资源(页面上所有的DOM,样式表,脚本,图片,flash等)全部
加载完毕后触发的一种事件。
DOMContentLoaded事件:是早于onload事件触发的一种事件。具体的时机是页面文档
加载完毕的时候。
dom的Ready跟我们平时那些开发有关呢?
比如常见的:
1.给一些元素绑定处理事件,但是如果代码写的不恰当,会造成文档元素还没加载
完毕,事件却已经执行完了,这样肯定是没有效果的。
2.还比如页面上的图片,flash虽然还没加载出来,但是其他的内容我们已经看到了
我们却不能做交互。常见的比如登录邮箱页面,邮箱地址和密码输入框已经
看到了,但是由于网页慢,该页面上的广告和动画还没加载出来,我们希望这时
可以进行信息的输入,我们才不管那些动画啥的好了没。
一般javaScript框架在处理不同浏览器的dom ready时涉及到以下知识点:
非IE内核中:
比如轮询document的readyState属性,
还有是否支持DOMContentLoaded事件。
IE内核中:
在IE内核中,doScroll函数必须在DOM加载完成后才能执行。
还有侦测doucument的onreadystatechange是否是complete。
当然上面的划分非IE内核啥的不太确切。现在IE内核也在进化。浏览器厂商越来越靠近
标准了。所以实际上做这方面处理时,是不侦测浏览器类型的,只看你是否支持这个函数
或类似函数。
更具体的解释可以看下网上这几篇博客:
http://qingbob.com/blog/从onload和DOMContentLoaded谈起
http://www.cnblogs.com/rubylouvre/archive/2009/12/30/1635645.html
http://www.cnblogs.com/zhangziqiu/archive/2011/06/27/domready.html
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
它特别适用于那些依赖全局资源、第三方库加载或者需要等待DOM完全构建后再进行操作的场景。同时,通过这种方式,我们可以确保所有异步加载的资源都已经加载完毕,为用户提供更加流畅的体验。 需要注意的是,虽然 `...
DOM ready事件就是指DOM树已经构建完成,可以安全地进行DOM元素的操作,而无需等待所有图像、样式表等资源的加载。 在非IE浏览器如Firefox中,可以使用`DOMContentLoaded`事件来监听DOM准备就绪的状态。然而,...
当页面DOM 元素全部加载完毕后就执行.ready()。$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。 如果在.ready()执行之前有javascript代码存在,那么javascript将怎么执行呢? 答案是先执行.ready...
在提供的`demo`文件中,可能包含了一个或多个HTML、CSS和JavaScript文件,用于演示`ready()`和`onload`的用法。通过分析和运行这些示例,你可以直观地看到它们在实际场景中的差异。 总的来说,理解和熟练使用`ready...
**jQuery Arrows: HTML DOM 元素箭头连接器** jQuery Arrows 是一个JavaScript库,专为在HTML Document Object Model (DOM)元素之间创建视觉连接箭头而设计。这个库利用了jQuery的强大功能,简化了在网页上动态构建...
`jQuery(document).ready()`函数是jQuery中的一个重要概念,它确保了在执行任何JavaScript代码之前,DOM已经完全加载和解析完成。这个特性使得开发者可以在不担心元素未定义的情况下操作DOM。以下是几种常见的表示...
在Angular框架中,DOM(Document Object Model)是HTML或XML文档的一种结构化表示,它允许JavaScript与HTML交互,包括添加、删除和修改元素。Angular应用在启动时会自动编译和链接DOM,但有时我们需要在DOM完全加载...
在前端开发中,DOM是HTML或XML文档在内存中的结构化表示,JavaScript可以借助DOM来操作网页内容。然而,页面加载时JavaScript的执行并不一定等待DOM完成构建,这可能导致尝试访问尚未加载的元素而引发错误。因此,...
"ready.js" 是一个轻量级、高效的JavaScript库,它允许开发者在DOM(文档对象模型)加载完成后执行指定的函数,从而确保页面元素已经就绪,可以进行操作。这个压缩包包含一个名为 "ready.js-master" 的目录,很可能...
ready 方法是 jQuery 实现的在 html 页面在 DOM(Document Object Model, 文档对象模型) 树完全加载完成后触发的一个方法. 因为它接收的方法在页面中所有的 DOM 都可访问时才执行, 所以此时你完全可以访问和操作 html...
传统的DOM操作中,我们使用的是onload事件,而随着jQuery的流行,我们更多地使用ready函数来完成相似的功能。那么,ready和onload之间的区别到底在哪里?它们各自的使用场景又是如何呢? 首先,让我们来解释一下...
jQuery库的其中一个核心功能是文档就绪事件,通常称为ready事件,它的作用是在DOM完全加载并解析完成之后执行一些代码。本文详细介绍了jQuery ready方法的实现原理和使用方法。 ready方法的作用是确保在页面的HTML...
4. ready方法的兼容性处理:在jQuery中,ready方法使用了标准的W3C DOM Level 2事件监听API,即document.addEventListener,以及IE特有的attachEvent方法,并对IE的特定版本进行了特殊处理,例如使用doScroll方法...
$(document).ready(function() { $('.rotate-element').propeller({ sensitivity: 50, // 鼠标移动的敏感度 speed: 200 // 旋转速度,单位毫秒 }); }); ``` 在上述代码中,`.rotate-element`是需要被旋转的DOM...
在 jQuery 中,ready() 函数是用来执行代码的一个核心函数,它确保了在 DOM(文档对象模型)完全加载和解析完成后执行代码。为了理解 ready() 函数,我们需要与 window 的 load 事件进行比较,了解它们在页面加载...
// DOM ready 函数 var doc = document; doc.ready = function (callback) { if (!isIE && !isWebKitOld && doc.addEventListener) { // 标准浏览器 return doc.addEventListener('DOMContentLoaded', callback...
JavaScript+jQuery 网页特效设计 jQuery中的DOM操作(1) ...$(document).ready(function(){ $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){
jQuery中的DOM操作(2) jQuery增加元素 jQuery删除元素 1、jQuery增加HTML元素 通过 jQuery,可以很容易地添加新元素/内容。 append() // 在被选元素的结尾插入内容 prepend() //在被选元素的开头插入内容 after() ...