`
deng131
  • 浏览: 672854 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

DOM加载与文档资源加载

阅读更多
在开发中遇到问题,需要在页面加载前显示广告提示。也就是在dom还没有加载先显示广告,当页面所有资源加载完后在隐藏广告,显示dom内容。window onload包含dom load。
页面响应加载的顺序是,域名解析->加载html->加载js和css->加载图片等其他信息,jquery的Dom Ready方法在加载图片等其他信息前就可以操作Dom了,先于window.onload事件触发前执行。
Jquery的ready和Dom的onload的区别:
   1. onload是所有dom元素创建完毕,图片、css等都加在完毕后才触发
   2. ready则是dom元素创建完毕后就被触发
相对来说jquery的ready可以提高网页的响应速度.


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试页面</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
        document.open();
	document.write('测试开始...............................');
        document.close();
</script>
<script>
 $(function(){
	alert('DOM资源已经加载完成!');
 })
</script>
</head>
	<!--body onload IE浏览器支持-->
	<body onload="alert('body on load!');">
		<div id="content">
			<div></div>
		</div>
		<script>
		//绑定window.onload事件
		window.onload = function(){alert('页面全部资源已经加载完成1');};
		//重复绑定window.onload事件
		$(window).load(function(){
			alert('页面全部资源已经加载完成2');
		});
		document.write('测试结束...............................');
		</script>
	</body>
</html>

参考:
http://www.jsmix.com/javascript/document-ready-window-load.html
http://xuxiangpan888.iteye.com/blog/253323
http://www.css88.com/archives/2112
http://www.61dh.com/blog/2009/01/jquery-documentready.html
http://blog.suiyidian.cn/post-55.html
分享到:
评论
3 楼 rainsilence 2011-01-08  
1。lz没听说过DOMContentLoaded事件吗?jquery除IE外都是直接调用这个事件的。IE是用onreadystatechange模拟的。为什么都不抓住本质的东西呢?

2。引用:就是在dom还没有加载先显示广告,当页面所有资源加载完后在隐藏广告,显示dom内容。

这是不可能的。广告也是dom内容。只能说是先显示广告的dom,后显示原画面的dom。

忠告:用jq的,除非看其源码。。。。
2 楼 deng131 2011-01-07  
ld57601870 写道
那IE中body的onload合适触发的?比window早吗?

在页面所有资源加载完成后,包括图片。。。
1 楼 ld57601870 2011-01-07  
那IE中body的onload合适触发的?比window早吗?

相关推荐

    angular监听dom加载完毕

    在Angular框架中,DOM(Document Object Model)是HTML或XML文档的一种结构化表示,它允许JavaScript与HTML交互,包括添加、删除和修改元素。Angular应用在启动时会自动编译和链接DOM,但有时我们需要在DOM完全加载...

    在DOM加载完成时运行的代码,可以这样写:

    `bj3_29.doc`可能是一个文档文件,`社区平台.rar`可能包含一个社区平台相关的项目源码或文档,`bj.txt`可能是一个文本文件,而`Docs`可能是一个包含更多文档的目录。这些文件无法直接提供关于DOM加载完成时执行代码...

    原生JS实现DOM加载完成马上执行JS代码的方法

    然而,有时我们只需要在DOM(文档对象模型)结构构建完成后,而不是等待所有资源加载完就执行某些操作。这时,我们可以利用原生JavaScript实现DOM加载完成即刻执行的JS代码,避免不必要的延迟。 `jQuery`提供了`$...

    DOM+XML文件下载(学习使用)

    由于整个文档会被加载到内存中,对于大型XML文件,这可能会消耗大量资源。此外,构建DOM树的过程也相对耗时,不适合对大量数据进行实时处理的场景。 在提供的压缩包文件中,很可能包含了一些示例XML文件和关于如何...

    JavaScript判断DOM何时加载完毕的技巧

    本文将介绍几种判断DOM加载完毕的技巧,以便开发人员能够在合适的时机执行JavaScript代码。 ### 理解浏览器的渲染和操作顺序 在了解如何判断DOM何时加载完毕之前,首先需要知道浏览器加载网页的一般顺序。通常,...

    动态加载外部JS文件

    动态加载外部JS文件是网页开发中的一个重要技术,它允许网页在需要时按需加载JavaScript资源,从而提高页面的加载速度,优化用户体验,并有效地管理复杂的项目结构。以下将详细阐述动态加载的原理、方法以及相关实践...

    DOM文档对象模型中文手册

    "DOM文档对象模型中文手册"是学习和查询DOM相关知识的重要资源,提供了关于DOM节点操作、事件处理、选择和遍历元素等方面的详细解释和示例。CodePub.chm格式的文件通常是一个帮助文档,用户可以通过它快速查找DOM...

    dom4j解析xml文件的压缩包

    5. **事件驱动解析(SAX)**:除了传统的DOM解析外,DOM4J还支持SAX解析器,这种解析方式适用于处理大型XML文件,因为它不需要一次性加载整个文档到内存。 6. **Namespace支持**:DOM4J提供了对XML命名空间的全面...

    基于javascript原生判断DOM是否加载完毕

    这种方式确保了代码的执行时机是在DOM加载完成后,而不会因页面的其他资源(如图片、CSS文件)还未加载完毕而导致错误。 开发者可以将需要在DOM加载完成后执行的代码封装在`onReady`函数的回调中,这样可以保证执行...

    dom4j-jar与dom4j解析xml文档介绍

    "dom4j-jar与dom4j解析xml文档介绍" 这个标题告诉我们,我们将探讨的是一个关于dom4j库的jar文件,以及如何使用这个库来解析XML文档。dom4j是一个Java库,它提供了丰富的API用于处理XML、HTML和DOM文档。这里的"jar...

    jquery 实现的等待加载页面

    开发者可以通过查看这个文件来学习如何将加载指示器与页面内容正确地结合在一起,以及如何调整其样式以匹配网站的整体设计。 `index.html`是网页的主入口文件,它包含了整个页面的结构和内容。在这个案例中,它会...

    dom4j api文档

    它可以监听XML解析过程中的事件,如开始文档、元素开始、元素结束等,从而在不完全加载文档的情况下进行处理。 **XPath表达式** DOM4J还支持XPath,一种用于在XML文档中查找信息的语言。`XPathReader`和`XPath`类...

    dom4j 解析 大 文件

    DOM通常会将整个XML文档加载到内存中形成一棵树形结构,这对于小文件是可行的,但对于大文件可能会导致内存溢出。DOM4J则提供了一种分段加载的方式,可以按需读取XML内容,降低了内存消耗。 XPath是XML路径语言,...

    Dom文档对象模型-2010版

    9. **DOM API**: `DOM Level 1`, `DOM Level 2`, `DOM Level 3`分别定义了一系列API,涵盖了文档的加载与交互、样式操作、事件处理等多个方面,提供了丰富的功能供开发者使用。 10. **跨浏览器兼容性**: 不同的...

    android Dom解析xml文件

    DOM解析器将整个XML文档加载到内存中,形成一个树形结构,允许开发者通过节点操作来访问和修改XML内容。本篇文章将深入探讨Android中的DOM解析XML文件,包括其基本原理、实现步骤和一些实用技巧。 ### 1. DOM解析的...

    DOM文档对象中文手册

    **DOM文档对象中文手册** - 这份手册详细介绍了DOM的各种概念、方法和实践案例,是学习和理解DOM的宝贵资源。通过阅读手册,开发者可以更好地掌握DOM操作技巧,从而编写出更高效、更具交互性的网页应用。无论你是...

    DOM文档对象中文手册.chm

    这个“DOM文档对象中文手册”是帮助开发者理解和使用DOM技术的重要资源,尤其对于中文环境下的开发者来说,它提供了一种方便的语言理解方式。 DOM的核心思想是将网页或XML文档解析为一个树形结构,每个部分都对应一...

    SAX与DOM之间的区别

    - 当使用DOM解析XML文档时,整个文档会被加载到内存中,并构建一个DOM树。 - 这种方法允许开发者随机访问文档中的任何部分,并且能够方便地修改文档。 - 适用于需要频繁修改或查询文档的情况。 - **SAX**: - ...

    dom4j dom4j dom4j dom4j

    3. **事件驱动模型**:DOM4J同时支持SAX解析器的事件驱动模型,这在处理大型XML文件时,可以避免一次性加载整个文档到内存,从而节省资源。 4. **文档对象模型**:DOM4J提供了一个类似于DOM的文档对象模型,但比DOM...

Global site tag (gtag.js) - Google Analytics