`

window.onload 关于页面加载完毕的问题

阅读更多
我们经常使用 window.onload 来处理页面,当页面加载完成做一些事情。但这个 window.onload 是页面全部加载完成,甚至包括图片,而我们实际上经常需要的是文档 DOM 加载完毕

这是原来的方法。
<script type="text/javascript">
function init(){
alert("页面加载完毕!");
}
window.onload=init;
</script>

对于 Mozilla 可以这样
<script type="text/javascript">
// for Mozilla browsers
if (document.addEventListener) {
    document.addEventListener("DOMContentLoaded", function(){alert("DOM加载完毕!")}, null);
}
</script>

对于 IE 浏览器,可以使用IE特有的 defer 属性。
<script defer type="text/javascript">
alert("DOM 加载完毕!")
</script>

非IE浏览器会忽略 defer 而直接执行 script 代码,你可以有两种办法来屏蔽 非IE浏览器。
conditional comments 条件注释
<!--[if IE]>
<script defer type="text/javascript">
alert("DOM 加载完毕!")
</script>
<![endif]-->

conditional compilation 条件编辑
<script defer>
// for Internet Explorer
/*@cc_on @*/
/*@if (@_win32)
    alert("DOM 加载完毕!")
/*@end @*/
</script>

除此之外的浏览器就使用最上面第一个好了。最后一个问题就是要避免 onload 运行多次的问题,加入判断。
<script type="text/javascript">
   function init() {
       // quit if this function has already been called
       if (arguments.callee.done) return;

       // flag this function so we don't do the same thing twice
       arguments.callee.done = true;

       // create the "page loaded" message
       var text = document.createTextNode("Page loaded!");
       var message = document.getElementById("message");
       message.appendChild(text);
   };

   /* for Mozilla */
   if (document.addEventListener) {
       document.addEventListener("DOMContentLoaded", init, null);
   }

   /* for Internet Explorer */
   /*@cc_on @*/
   /*@if (@_win32)
       document.write("<script defer src=ie_onload.js><"+"/script>");
   /*@end @*/

   /* for other browsers */
   window.onload = init;
</script>
<p id="message"></p>
分享到:
评论

相关推荐

    ie中 body onload 和 window onload 解决法案

    然而,`window.onload` 更为全面,能确保所有资源都已加载完毕,因此在处理包含大量外部资源的页面时,通常更推荐使用`window.onload`。 在实际开发中,如果同时使用了`body.onload`和`window.onload`,那么`window...

    window.onload

    `window.onload` 是一个全局事件处理函数,当整个页面(包括所有的脚本、图片、CSS 文件等)加载完毕后触发。它常用于在页面完全加载完成后执行某些操作,如初始化页面元素、绑定事件监听器等。 ##### 2.2 实现方式...

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

    在 HTML 页面加载完毕后运行 JS 方法 在 HTML 页面中,经常需要在页面加载完毕后执行某些 JavaScript 代码,以确保页面中的所有元素都已经加载完毕,可以被 JavaScript 代码所操作。有两种常见的方法可以实现这点,...

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

    另外,为了实现页面加载完毕后执行代码的功能,我们还可以使用更常见的方式,即window.onload事件。window.onload事件会在整个页面(包括所有的资源如图片、样式表等)加载完成后触发。它的用法非常直观,如下所示:...

    js实现页面加载完毕之前loading提示效果

    在本文中,我们将深入探讨如何使用JavaScript实现页面加载完毕之前的“loading”提示效果。这个效果可以在页面内容完全加载之前,向用户展示一个“页面加载中,请稍后...”的提示,以提升用户体验,避免用户在等待...

    js onload处理html页面加载之后的事件

    window.onload是一个事件处理属性,我们通过给这个属性赋值一个函数,来定义当页面加载完毕后需要执行的代码。赋值的方法有两种:一种是直接赋值一个函数,另一种是先赋值为null,然后在其他地方添加具体的函数。...

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

    在上述代码中,当页面加载完成,控制台会打印出"页面渲染完成",表明`onload`事件已触发。 然而,`window.onload`的缺点在于它等待所有资源加载,包括可能较慢的图片,这可能会导致延迟页面的操作执行。为了更快地...

    Jquery 在页面加载后执行的几种方式

    `window.onload`通常用于在页面所有内容加载完毕后执行一些特定的操作,例如某些依赖于图片或其他资源的操作。然而,由于它会阻塞页面渲染,所以不推荐频繁使用,除非确实需要。 最后,一个开发人员在编写代码时...

    window.open的参数详细应用

    这里定义了一个 `openwin` 函数,并在 `&lt;body&gt;` 标签的 `onload` 事件中调用它,使得页面加载完毕后自动打开新窗口。 #### 示例 3: 同时打开多个窗口 ```javascript function openwin() { window.open("page.html"...

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

    现今我们主要使用的是window.onload来处理页面加载完毕事件。 在实际开发中,确保页面元素完全加载完毕后执行代码是非常重要的。比如,在一些动态加载内容的Web应用中,可能需要在页面的DOM结构完全加载后再进行DOM...

    Jqyery中同等与js中windows.onload的应用

    这两种写法实际上是等价的,它们都会在DOM加载完毕后立即执行内部的代码,而不是等到整个页面加载完成。jQuery之所以如此流行,部分原因在于其语法的简洁性和易读性。 需要注意的是,当和其他JavaScript库(如...

    原生js检测页面加载完毕的实例

    原生JavaScript中,检测页面加载完毕的主要方法是通过`window.onload`事件。这个事件在所有资源(包括图像、脚本、框架等)都已加载完毕后触发。正确使用`window.onload`的语法如下: ```javascript window.onload ...

    两种方法实现在HTML页面加载完毕后运行某个js

    在网页开发中,确保...如果需要确保所有资源都加载完毕,比如在处理图像或者动画时,`window.onload`则更为恰当。总的来说,理解这两个事件的区别和应用场景,可以帮助我们编写出更加高效和可靠的JavaScript代码。

    JQ ready()和onload的加载耗时

    `window.onload`事件则是在整个页面,包括DOM、图片、样式表等所有资源都加载完毕后才会触发的事件。使用JavaScript原生语法,你可以这样写: ```javascript window.onload = function() { // 页面完全加载后的...

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

    总结来说,`jQuery(document).ready()`提供了一种灵活且高效的处理DOM就绪的方式,而`window.onload()`和`body.onload`更适用于需要等待整个页面加载的场景。理解这些不同方法的用法和区别,可以帮助开发者更有效地...

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

    `window.onload`和`DOMContentLoaded`是两个关键的事件,用于监听页面加载的不同阶段。它们各自有其应用场景和优势。 首先,`window.onload`事件是在整个页面(包括HTML、CSS、JavaScript、图片和其他外部资源)...

    15天漫游jQuery中文翻译word版

    数年来程序员们习惯了通过它在页面加载完毕后执行客户端脚本。 但有时候等待页面加载可以让人心急如焚~~ 几张较大的图片文件就可以显著拖慢 window.onload() 的执行 资源太大,传百度网盘了,链接在附件中,有需要的...

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

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

Global site tag (gtag.js) - Google Analytics