html dom的加载
操作HTML DOM文档的一个难题是,你的JavaScript代码可能在DOM完全载入之前运行,这会导致你的代码产生一些问题。页面加载时浏览器内部操作的顺序大致是这样的: 1. HTML被解析。 2. 外部脚本/样式表被加载。 3. 文档解析过程中内联的脚本被执行。 4. HTML DOM构造完成。 5. 图像和外部内容被加载。 6. 页面加载完成。 头部包含的和从外部文件中载入的脚本实际上在HTML DOM构造好之前就执行了。正如前面提到的,这一个问题是很重要的,因为在那两种地方的执行的所有脚本将不能访问DOM。可喜的是,存在许多绕开这一问题的办法。 等待页面加载
到目前为止,最常用的技术是在任何DOM操作之前简单地等待整个页面加载。使用这一技术,可以通过简单地给window对象的load事件附加一个在页面载入后触发的函数。在第六章中我将讨论关于事件的更多细节。程序5-10展示了一个在页面加载完成后执行DOM相关代码的例子。
程序5-10. 为window.onload属性附加回调函数的addEvent函数
代码:
//等待页面加载完成 //(使用了下一章描述的addEvent函数) addEvent(window, "load", function() { //执行HTML DOM操作 next( id("everywhere") ).style.background = 'blue'; });
尽管这一操作可能是最简单的,它也将总是最慢的。从加载操作的顺序中,你可能已发现页面加载完成绝对是最后一步。这意味着如果在你的页面上有大量的图像、视频等等,你的用户在JavaScript最终执行前得等待很大一阵子。
等待大部分DOM加载
第二种技术很迂回,不太推荐使用。如果你还记得,我在上一节里说了,内联的脚本是在DOM构造以后执行的。这是一个半真半假的说法。那些脚本实际上是在DOM构造时遇上了就执行的。这就是说如果你有一段内联的脚本嵌在页面的中间部分,则该脚本只能立即拥有前半部分DOM的访问权。然而,把脚本作为非常靠后的元素嵌入页面中,就意味着你能够有效地对先于它出现的所有的DOM元素进行访问,获得一种假冒的模拟DOM加载的方式。这种方法的典型实现通常如程序5-11所示。
程序5-11. 通过向HTML DOM的结尾置入(包含函数调用的)<script>标签来判定DOM是否已经加载
代码:
<html> < head> <title>Testing DOM Loading</title> <script type="text/javascript"> function init() { alert( "The DOM is loaded!" ); tag("h1")[0].style.border = "4px solid black"; } </script> < /head> < body> <h1>Testing DOM Loading</h1> <!--这里是大量的HTML --> <script type="text/javascript">init();</script> < /body> < /html>
在这个例子里,一个内联脚本作为DOM的最后一个元素;它将是最后一个被解析和执行的。它所做的唯一的事情是调用init函数(函数内部应包含你想要处理的任何DOM相关的代码)。这一解决方案的存在的最大的问题在于,它是混乱的:给你的HTML里加入了额外的标记,只为了判定DOM是否已经加载。
断定DOM何时加载完成
最后一种可用来监视DOM加载的技术,可能是最复杂(从实现的角度来看)但也是最有效的。它结合了绑定到window的load事件的简易性和内联脚本技术的速度。 这一技术的原理是在不阻塞浏览器的前提下尽可能快地反复检查HTML DOM是否已经具有了你所需的特性。有几种东西可以被检查以判断HTML文档是否已经可以操作了: 1. document: 你需要检查DOM document是否已经存在。如果你检查得够快的话,它一开始可能仅仅是undefined。 2. document.getElementsByTagName和document.getElementByID: 检查document是否已经具备了经常使用的getElementsByTagName和getElementById函数;这些函数将在它们准备好被使用以后存在。 3. document.body: 作为额外的保障,检查<body>元素是否已完成被载入。理论上讲,前面的检查应该已经足够了,但是我发现过它们还不够好的例子。 使用这些检查,你将对DOM何时准备好被使用有一个足够好的把握(好到可能只错过了几毫秒)。这一方法近乎没有瑕疵。仅使用前面的检查,脚本可以在所有的现代浏览器里运行得相对很好了。然而,Firefox某些新的缓存机制的实现,导致了window的load事件实际上能够在你的脚本判断DOM是否就绪之前就触发。为了利用这一优势,我也加入了对window的load事件的检查,希望获得一些额外的速度。 最终,domReady函数在DOM就绪之前一直在收集所有的待运行函数的引用。一旦DOM确实准备好了,就遍历这些引用并一个一个地执行它们。程序5-12展示了一个可用来监视DOM何时完全载入的函数。
程序5-12. 监视DOM直到它准备好的一个函数
代码:
function domReady( f ) { //如果DOM已经载入,立即执行函数 if ( domReady.done ) return f(); //如果我们已经添加过函数 if ( domReady.timer ) { //则将函数添加到待执行的函数列表 domReady.ready.push( f ); } else { //为页面完成加载时附加一个事件,以防它率先发生 //使用了addEvent函数 addEvent( window, "load", isDOMReady ); //初始化待执行函数的数组 domReady.ready = [ f ]; //尽可能快地检查DOM是否已就绪 domReady.timer = setInterval( isDOMReady, 13 ); } } //检查DOM是否已经准备好导航 function isDOMReady() { //如果我们断定页面已经加载完成了,则返回 if ( domReady.done ) return false; //检查一些函数和元素是否已可访问 if ( document && document.getElementsByTagName && document.getElementById && document.body ) { //如果它们已就绪,则停止检查 clearInterval( domReady.timer ); domReady.timer = null; //执行所有正在等待的函数 for ( var i = 0; i < domReady.ready.length; i++ ) domReady.ready[i](); //记住现在我们已经完成 domReady.ready = null; domReady.done = true; } }
现在我们应该看看这在一个HTML文档里会是什么样。使用domReady函数就像使用addEvent函数(见第6章)一样,绑定你的特定函数到文档准备好导航和操作的时候被触发。在下面的例子里我把domReady函数放入了一个名为domready.js的外部JavaScript文件里。程序5-3展示了怎样使用新的domReady函数来监视DOM何时已载入。
程序5-13. 使用domReady函数在判定DOM何时准备好导航和修改
代码:
<html> < head> <title>Testing DOM Loading</title> <script type="text/javascript" src="domready.js"></script> <script type="text/javascript"> function tag(name, elem) { //如果上下文元素未提供,则搜索整个文档 return (elem || document).getElementsByTagName(name); } domReady(function() { alert( "The DOM is loaded!" ); tag("h1")[0].style.border = "4px solid black"; }); </script> < /head> < body> <h1>Testing DOM Loading</h1> <!--这里是大量的HTML --> </body> < /html>
html dom的加载的更多相关文章
- jquery的ready方法(DOM是否加载完)详解与使用
jquery的ready方法(准备DOM触发)还是比较复杂的,我们先看流程图:
- 页面全部加载完毕和页面dom树加载完毕
dom树加载完毕 $(document).ready()//原生写法document.ready = function (callback) { ///兼容FF,Google ...
- chrome://inspect调试html页面空白,DOM无法加载的解决方案
chrome://inspect调试html页面空白,DOM无法加载的解决方案 先描述一下问题 有一段时间没碰huilder hybird app 开发了,今天调试的时候 chrome://inspe ...
- window.onload 和 DOMContentLoaded区别及如何判断dom是否加载完毕
http://blog.allenm.me/2010/02/window-onload-和-domcontentloaded/ 其中使用IE不支持DOMContentLoaded,那么判断IE是否加载 ...
- DOM元素加载之前执行的jQuery代码
<script type="text/javascript"> (function() { alert("DOM还没加载哦!"); })(jQuer ...
- 所有DOM元素加载之前执行的页面加载事件[jquery]
<script type="text/javascript"> (function() { alert("DOM还没加载"); })(jQuery) ...
- document.readyState和document.DOMContentLoaded判断DOM的加载完成
document.readyState:判断文档是否加载完成.firefox不支持. 这个属性是只读的,传回值有以下的可能: 0-UNINITIALIZED:XML 对象被产生,但没有任何文件被加载. ...
- js dom元素加载完成执行
//dom ready执行 function ready(fn){ if(document.addEventListener){ document.addEventListener('DOMConte ...
- DOM加载过程中ready和load的区别
在浏览器地址栏输入URL地址,浏览器开始加载页面时,有以下几个过程 1.浏览器开始解析HTML文档 2. 浏览器遇到HTML文档中的<script>元素以及CSS样式文件,并且没有asyn ...
随机推荐
- SQL 表锁(转)
其实你可以使用事务处理 比方说在一个字段里面添加一个boolean 的字段当你要处理该字段的时候就 True 哪么别的人都不可以进行操作 如果是False 哪么就可以进行操作--呵可--我是这样的 ...
- uva 10152 ShellSort
//这个算法用到了"相对位置"的思想,并且就本题而言还有一个很重要的结论就是,假设 //移动了k个元素,那么这k个元素一定是最后结果的那个序列的前k个元素,而且易知, //越先移动 ...
- 分析代码的利器 - ctags
比方我们在分析代码的时候,须要看某一个方法或类的定义,我们须要临时跳转过去看一下,然后还能非常方便的回来.这时候ctags就派上用场了. 比方你有一个src目录,先用ctags对其生成索引: ctag ...
- some scrum screenshots
backlog tracking progress Initial Stage Next Stage End
- Codeforces Gym 100286I iSharp 水题
Problem I. iSharpTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/ ...
- 将word转化为swf 进行如同百度文库的般阅读
实现如同百度文库那样类似功能需要进行一系列转化,一般流程想将word转化为pdf格式,再将pdf格式转化为swf格式.在网页上显示其实都是swf格式内容. 首先将word转化为swf,需要调用com组 ...
- Android_通过传感器抓小偷
package com.beyond.phonestolen; import android.hardware.Sensor; import android.hardware.SensorEvent; ...
- ListView添加项目带序列
ListView添加项目带序列 function AddSelItems(listview1:TListView;ListView2:TListView):Boolean;var s: st ...
- iOS开发——UI_swift篇&TableView自定义聊天界面
TableView自定义聊天界面 1,下面是一个放微信聊天界面的消息展示列表,实现的功能有: (1)消息可以是文本消息也可以是图片消息 (2)消息背景为气泡状图片,同时消息气泡可根据内容自适应大小 ...
- Percona-Galera-Monitoring-Template监控模板说明
http://blog.chinaunix.net/uid-16844903-id-4054635.html 官网链接:http://www.percona.com/doc/percona-monit ...