`

javascript判断页面加载(页面下载)是否完毕

 
阅读更多

首先要明确两个概念

1.window.onload:页面加载完毕,页面内所有组件(图片等)都可用。

2.dom 加载:指文档对象模型加载完毕,要先于window.onload事件。

可以看出,当页面包含大量组件(特别是图片)的情形下,以上两种加载的时间相隔将会很长,这时判断dom何时加载完成就显得特别重要

页面的一些组件(css,image,flash)不会导致页面的DOM未构建完成。只有JS会阻塞页面的DOM节点的构建

function init() {

// 如果该函数被调用多次,直接返回

if (arguments.callee.done) return;

//

arguments.callee.done = true;

// 清除对safari设置的定时器

if (_timer) clearInterval(_timer);

alert(document.getElementById(“test”).id);

};

// firefox和opera9.0

if (document.addEventListener) {

document.addEventListener(“DOMContentLoaded”, init, false);

}

//ie

document.write(“<script id=__ie_onload defer src=javascript:void(0)><\/script>”);

var script = document.getElementById(“__ie_onload”);

script.onreadystatechange = function() {

if (this.readyState == “complete”) {

init(); // call the onload handler

}

};

//Safari

if (/WebKit/i.test(navigator.userAgent)) { // sniff

var _timer = setInterval(function() {

if (/loaded|complete/.test(document.readyState)) {

init(); // call the onload handler

}

}, 10);

}

//其它浏览器直接用window.onload事件

分享到:
评论

相关推荐

    C#判断webbrowser页面最终加载完成

    3. **JavaScript交互**:如果页面允许,可以通过执行JavaScript代码来判断页面是否准备好。例如,可以编写一个JavaScript函数检查所有图片是否加载完成,或者等待特定的DOM元素出现。然后,使用WebBrowser的`...

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

    在JavaScript中,可以通过监听document对象的readyState属性变化来判断页面是否加载完毕。readyState属性用于描述当前文档的加载状态,有以下几种值: - loading:页面正在加载中。 - interactive:页面已经完成DOM...

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

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

    JavaScript判断页面加载完之后再执行预定函数的技巧

    本文将探讨如何在JavaScript中判断页面加载完成后执行预定的函数,以及使用监听器和`window.onload`事件来实现这一目标。 首先,传统的做法是在HTML元素中直接内联JavaScript,如通过`onclick`属性触发函数。例如:...

    精确判断webbrowser是否加载完成demo(delphi)

    然而,如何准确判断WebBrowser组件是否已完全加载完毕,是许多开发者在实际应用中会遇到的一个问题。今天,我们将深入探讨这个问题,并提供一个解决方案。 首先,我们要理解WebBrowser组件的工作原理。它是基于...

    js页面加载进度条

    JavaScript(简称JS)页面加载进度条是一种用户界面交互设计,用于提供可视化的页面加载状态,让用户了解网页内容的加载进度,提升用户体验。这种效果通常在大型应用或包含大量资源的网页中常见,因为它能平息用户的...

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

    然而,这种方法存在一个缺点:它可能会导致脚本在页面加载完毕之前延迟执行,尤其是当页面中包含大量图片和视频资源时。 ### 监听DOM加载状态 为了在不阻塞浏览器加载的情况下尽可能快地检查DOM是否加载完成,我们...

    页面加载效果

    "fakeloader"是一种常见的页面加载效果实现方式,它通常由JavaScript和CSS技术配合完成,能够创建出各种创意且吸引人的加载动画。 在提供的压缩包文件中,包含了多个HTML示例(index.html、readme.html以及多个demo...

    判断iframe里的页面是否加载完成

    然而,为了实现更复杂的交互功能,如在父页面与`iframe`页面之间进行通信或者在`iframe`加载完成后执行某些操作,我们需要能够判断`iframe`内的页面是否已经完全加载。本文将详细介绍如何使用JavaScript来检测`...

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

    本文主要介绍了如何使用JavaScript原生方法来判断DOM文档对象模型是否加载完毕。在前端开发中,确保在DOM加载完成后执行某些操作是非常常见和重要的。为此,我们可以通过JavaScript提供的一系列方法和属性来检测当前...

    JavaScript & jQuery完美判断图片是否加载完毕

    尤其是在使用JavaScript和jQuery动态加载图片时,若不能准确判断图片是否加载完成,可能会导致页面布局错误或JavaScript程序出错。因此,本文详细探讨了如何使用JavaScript和jQuery来判断图片是否已经成功加载。 ...

    js判断图片加载完成后获取图片实际宽高的方法

    此外,这段代码可以在页面加载时执行,也可以在需要时动态执行,比如响应某个用户的操作。只要确保在图片加载完成之后再获取其尺寸即可。 在上述代码的基础上,如果希望减少代码量,可以进一步简化。例如,将图片...

    javascript经典特效---打开页面的等待(三).rar

    在状态变为`'complete'`时,页面加载完毕,隐藏等待效果。 5. **JavaScript代码示例** ```javascript document.onreadystatechange = function() { if (document.readyState === 'interactive') { // 页面DOM...

    在css加载完毕后自动判断页面是否加入css或js文件

    在本例中,我们将详细探讨如何在CSS加载完毕后,自动判断页面是否已经引入了相应的CSS或JavaScript文件,并进行相应的处理。 首先,我们需要了解jQuery UI中的dialog()函数,它是jQuery UI库提供的一个用于创建模态...

    H5页面APP端展示(下拉刷新,上拉加载)

    - 检测底部:监听滚动事件,判断是否接近页面底部,通常设定一个阈值来触发加载新内容的条件。 - 请求新数据:当用户滚动到页面底部时,发送请求获取更多的数据。 - 插入内容:收到新数据后,将数据插入到现有...

    asp.net页面 加载进度条

    在ASP.NET web应用程序中,创建一个页面加载时显示进度条并待数据加载完成后自动隐藏的交互体验,可以显著提升用户体验。下面将详细讲解如何实现这一功能。 首先,我们需要理解页面生命周期。在ASP.NET中,一个网页...

Global site tag (gtag.js) - Google Analytics