`

document.onLoad的触发时间

    博客分类:
  • js
阅读更多

onload 事件

onload 事件会在页面或图像加载完成后立即发生。

 

昨天在写一个网页特效时,总是提示错误。一直到今天通过一个示例才知道原因。

我一直认为使用javascript的document.onLoad指定一个函数,跟在Body标签中加入onLoad是一样的
不过能过今天的示例发现,document.onLoad并不是在页面加载完成时引发。
示例代码如下:(测试环境Win2003 + IE7)

 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2<html>
 3<head>
 4<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 5<title>无标题文档</title>
 6<script language="JavaScript">
 7function mytest(){
 8    alert(document.getElementById("my2"));
 9}

10document.onLoad = mytest();
11
</script>
12</head>
13
14<body>
15<id="my2">测试内容</p>
16</body>
17</html>

打开示例中的htm文件时,在页面没有完全显示,即白屏的时侯就弹出提示对话框了。说明mytest在页面没有显示完成时就被调用。

注释掉document.onLoad这句,然后修改body标签为

<body onLoad="mytest()">

重新打开页面,此时才是页面加载完成后才调用mytest。不知道什么原因,呵呵

 

分享到:
评论

相关推荐

    浅析document.ready和[removed]的区别讲解

    需要注意的是,如果在`&lt;body&gt;`元素上设置了`onload`事件,而同时使用了`$(document).ready()`,可能会导致`document.ready`事件不触发。这是因为`onload`事件覆盖了`document.ready`,除非你正确管理这些事件的注册...

    jQuery(document).ready(function($) { });的几种表示方法

    `window.onload`是一个全局的JavaScript事件,等待整个页面(包括所有资源如图片、脚本等)加载完成后触发: ```javascript window.onload = function() { alert("你好"); }; ``` 然而,`window.onload`只能绑定一...

    img onload事件绑定各浏览器均可执行

    jQuery的`$(document).ready()`函数会在DOM准备就绪时执行,不等待图片加载,因此在非IE和Opera浏览器中,`img.onload`事件仍然会被触发。 解决这个问题的关键在于,我们需要在图片开始加载之前设置`onload`事件...

    TypeError document.getElementById(…) is null错误原因

    这样可以确保脚本在DOM树构建完成后,但在DOMContentLoaded事件触发之前执行。 ```html &lt;script src="yourScript.js" defer&gt; ``` #### 3. 使用`&lt;script&gt;`标签的`async`属性 `async`属性使得脚本异步加载,不会...

    实现在HTML页面加载完毕后运行js方法.docx

    `window.onload` 事件是在页面中的所有元素都已经加载完毕后触发的,而 `$(document).ready()` 方法是在 DOM 加载完毕后执行的,虽然这也意味着页面中的所有元素都可以被 JavaScript 代码所操作,但是,并不意味着...

    jquery的$(document).ready()和onload的加载顺序

    因此,`onload`事件的触发通常比`$(document).ready()`晚,特别是在图片较多或者文件较大的页面中,这个差异尤为明显。 在给定的场景中,开发者遇到了一个在Firefox下正常运行但在IE下出现延迟的问题。这是因为IE...

    一张表格告诉你windows.onload()与$(document).ready()的区别

    在JavaScript和jQuery中,`window.onload()` 和 `$(document).ready()` 都是用于处理页面加载事件的关键函数,但它们的执行时机和用法存在显著差异。了解这些区别对于优化前端性能和确保代码正确执行至关重要。 1. ...

    javascript页面加载完执行事件代码

    window.onload事件会在整个页面(包括所有的资源如图片、样式表等)加载完成后触发。它的用法非常直观,如下所示: ```javascript window.onload = function() { // 此处编写页面加载完毕后执行的代码 alert('...

    jQuery mobile在页面加载时添加加载中效果 document.ready 和[removed]执行顺序比较

    由于`document.ready`事件可能在`window.onload`之前触发,因此我们需要通过延迟调用来确保加载器在页面开始加载时可见。然后,`window.onload`事件用于在所有资源加载完毕后隐藏加载器,确保用户看到加载过程的完整...

    js 某个页面监听事件渲染完毕的时间.pdf

    这意味着当用户看到“加载中”的提示消失,页面完全展现时,`onload`事件才会被触发。以下是一个简单的`window.onload`事件监听的例子: ```html &lt;!DOCTYPE html&gt; window.onload = function() { console.log...

    document.getElementById获取控件对象为空的解决方法

    这是因为 `onLoad` 事件是在 `&lt;body&gt;` 标签内的所有内容加载完成后触发的,但 JavaScript 代码在 `&lt;head&gt;` 中,而 `&lt;head&gt;` 在 `&lt;body&gt;` 之前被解析和执行。因此,当 JavaScript 代码运行时,ID 为 "mes" 的文本框还...

    js之onload事件的一点使用心得

    除了使用onload事件,我们还可以使用document.addEventListener('DOMContentLoaded', callback)的方式来监听DOM完全加载和解析完成的事件。这个事件在IE9+、Firefox、Chrome、Opera和Safari等浏览器中均得到支持。...

    XML_Document.rar_xml_xml_Document

    2. onload: 当整个页面包括所有资源加载完毕后触发。 在实际开发中,XML_Document对象模型通常结合XMLHttpRequest或fetch API来实现异步加载XML数据,然后通过上述的方法和属性进行解析和操作。 "XML_Document.chm...

    用javascript实现jquery的document.ready功能的实现代码

    在实际开发过程中,如果需要确保在不支持`DOMContentLoaded`事件的老旧浏览器中也能正常工作,可以选择使用`window.onload`事件。但如果主要针对现代浏览器,推荐使用`DOMContentLoaded`事件,因为它能更快地执行...

    Js方法打开网页全屏显示 模拟F11

    为了实现自动全屏,可以在页面加载完成后触发全屏操作,可以利用`window.onload`或`DOMContentLoaded`事件: ```javascript window.onload = function() { fullScreen(); }; ``` 或者使用`DOMContentLoaded`事件...

    Html5FileReader文档.docx

    5. onload:成功事件,当读取操作成功时触发。 6. onloadend:完成事件,无论读取操作是否成功时触发。 FileReader 接口的使用 使用 FileReader 接口非常简单。首先,需要创建一个 FileReader 对象,然后使用该...

    仅img元素创建后不添加到文档中会执行onload事件的解决方法

    然而,在某些情况下,即使没有将`img`元素添加到文档流中,`onload`事件也会被触发。这个问题可能对开发者造成困扰,因为它可能导致预期之外的行为。下面我们将详细探讨这个问题以及如何解决。 首先,我们要理解为...

    什么是document对象?什么是window对象?.pdf

    window.onload是一个事件处理器,当文档加载完成后会被调用。window.onunload则是当用户离开当前页面时触发的事件处理器。还有window.resizeTo()方法可以调整浏览器窗口的大小。 综上所述,document和window对象在...

Global site tag (gtag.js) - Google Analytics