js如何判断文档加载完成

在JavaScript中，判断文档加载完成通常涉及到监听DOMContentLoaded事件或使用load事件。以下是这两种方法的详细解释及示例代码。

1. `DOMContentLoaded`事件

DOMContentLoaded事件在初始的HTML文档被完全加载和解析完成后触发，不需要等待样式表、图像和子框架完成加载。

优势：

加载速度快，因为它不等待所有资源（如图片）加载完成。
适用于大多数需要在DOM结构准备好后立即执行的脚本。

应用场景：

页面初始化时的DOM操作。
插件或脚本的初始化。

示例代码：

document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM fully loaded and parsed');
    // 在这里执行DOM相关的操作
});

2. `load`事件

load事件在整个页面及所有依赖资源如样式表和图像都已完成加载时触发。

优势：

确保所有资源都已加载完毕，适用于依赖这些资源的脚本。

应用场景：

图片或其他媒体资源的尺寸调整。
页面完全加载后的最终布局调整。

示例代码：

window.addEventListener('load', function() {
    console.log('Page fully loaded');
    // 在这里执行需要所有资源加载完成的操作
});

遇到问题及解决方法

问题： 页面加载后脚本未能正确执行。

可能原因：

脚本放在了<head>标签内，此时DOM可能还未完全加载。
资源加载失败或延迟导致load事件未触发。

解决方法：

将脚本放在<body>标签的底部，确保DOM结构在脚本执行前已加载。
使用DOMContentLoaded事件来处理DOM相关的脚本，而不是依赖load事件。
检查网络请求，确保所有资源都能成功加载。

通过上述方法，可以有效判断文档加载完成的状态，并根据不同的需求选择合适的事件来执行相应的脚本。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JS判断单、多张图片加载完成

在实际的运用中有这样一种场景，某资源加载完成后再执行某个操作，例如在做导出时，后端通过打开模板页生成PDF，并返回下载地址。...试想，如果模板中有图片，此时如何判断图片是否加载完成？在此之前来了解一下jquery的ready与window.onload的区别，ready只是dom结构加载完毕，便视为加载完成。...（1）、单张图片（图片在文档中） // HTML //js $(document).ready(function(){ //jquery $('#xiu').load(function(){ // 加载完成.../uploads/2014/11/hs-xiu.jpg' xiu.onload = function(){ // 加载完成 } （3）、单张图片（结合ES6 Promise） //js

12.5K2 0

判断图片是否加载完成

有时需要获取图片的尺寸，这需要在图片加载完成以后才可以。有三种方式实现，下面一一介绍。 1、load事件 <!...readystatechange:loaded' } } readyState为complete和loaded则表明图片已经加载完毕...clearInterval(timer) } }, 50) } imgLoad(img1, function() { p1.innerHTML('加载完毕...') }) 轮询不断监测img的complete属性，如果为true则表明图片已经加载完毕，停止轮询。

4.6K7 0

JavaScript——判断页面是否加载完成

前言接上文，既然你是做一个loading的效果，你总不能一直loading，当页面完成加载的时候你总要结束吧步骤先说下原生的方法，再讲jquery的方法，原理是一样的 JavaScript //当页面加载的时候开始执行...document.onreadystatechange = function (){ if(document.readyState == "complete") //判断页面是否加载完成

1901 0

前端JS判断远程文件是否加载

但这样一般都埋下了潜在的问题，就是怎么知道该远程文件是否已经加载的呢？好吧，经过一系列骚操作，我们就来说一下办法。都是使用原生的JS进行调用判断，感兴趣的同学可以进行直接调用。...1、判断图片是否已经加载： var img = new Image(); img.src = url; /*url为资源地址*/...img.onload = function() { console.log('图片加载完成'); } 2、判断CSS是否加载： function...'); } } loadCSS('test.css'); 3、判断远端的JS文件是否已经加载： function loadJS(url) {...console.log('JS加载完成');//加载完成内容 } } loadJS('test.js'); 最后送上一个低版本游览器的返回装态

14.4K3 0

js判断iframe加载是否成功的方法

今天木槿来探讨一下js判断iframe加载是否成功的方法，并且兼容多种浏览器。...这时，我们就要考虑是否可以等iframe加载完后再执行后边的操作，当然，各种浏览器早就为我们考虑到啦，看下面：ie浏览器IE的每个elem节点都会拥有一个onreadystatechange事件，这个事件每次在...添加一个 onreadystatechangeiframe.attachEvent("onreadystatechange", function(){//此事件在内容没有被载入时候也会被触发，所以我们要判断状态...;其他浏览器：Firefox,Opera,chrome等在其他非IE的浏览器上 Firefox,Opera,chrome等 iframe 都会拥有一个 onload 事件，此事件只要触发就说名内容已经加载完毕...(iframe.attachEvent){iframe.attachEvent("onreadystatechange", function() {//此事件在内容没有被载入时候也会被触发，所以我们要判断状态

2K2 0

如何动态加载js？

3、如何约束js文件的加载顺序？a.js定义了一个函数，b.js要调用，但是b.js先加载了，a.js还没加载完成，造成函数未定义，无法调用。 4、js文件的合并。...5、加载js完毕之后，要可以执行回调函数。解决问题：如何解决这些问题呢？我想到的办法是——动态加载js。就是通过js代码的方式来加载。...弄了好久才发现，原来是js文件会被加载多次。为什么被加载了多次呢？原因在于 onreadystatechange 和 onload 。为什么这两个事件都调用了callback？...老办法，判断浏览器类型。如果是IE10，那么只设置onload。然后，世界安静了。当然这里浏览器的类型判断还不完全。浏览器太多了，遇到不兼容的在考虑吧，俺js其实很烂的。...下一步是如何管理js。还有js的客户端缓存、复用的问题。

12.8K5 0

如何判断js函数存在

前言有时候想判断一个js变量或者js函数时候存在，该怎么实现呢？引发最近开发一款应用插件，兼容pjax会调用函数加载播放器，但是有时候页面没有音乐就不需要加载播放器，这时候调用函数就会报错。..."function") {return true;} } catch(e) {} return false;} 解决问题看看不是说播放器问题吗，我们需要新建一个函数，pjax调用它，这个新函数判断加载播放器函数时候存在...，如果存在就加载，否则就退出。...原理刨析 eval 函数执行一段js并返回值 typeof 函数判断类型 try catch 代码块捕捉错误并防止程序终止 typeof(eval(funcName)) == "function...(e) {} 很显然捕捉了错误接着执行最后一行 return false; js函数不存在

7.7K3 0

网页image资源如何判断加载完毕

var time_img; // 定时器 var isLoaded = true; // 控制变量 // 判断图片加载状况，加载完成后回调 isImgLoad(function...}else{ //isLoaded为为false，因为找到了没有加载完成的图，将调用定时器递归 isLoaded = true;...，并不表示页面的资源被加载完成，而onload方法时原生的方法，指dom的生成和资源完全加载（比如图片等）出来后才执行 // HTML //js $(document).ready...(function(){ //jquery $('.bannerItem').load(function(){ // 加载完成 $('.swipe ul'

1.5K1 0

wkwebview加载完成_【Swift】WKWebView与JS的交互使用

接下来大家一块学习下WKWebView是怎么实现原生代码和JS交互的。...WKWebView 支持更多的HTML5的特性高达60fps滚动刷新频率与内置手势与Safari相容的JavaScript引擎在性能、稳定性方面有很大提升占用内存更少协议方法及功能都更细致可获取加载进度等...textField.text = defaultText } alertViewController.addAction(UIAlertAction(title: "完成...) })) self.present(alertViewController, animated: true, completion: nil) } 4、获取网页中节点的数据 //网页加载完成...JavaScriptCore 大体是由 4 个类以及 1 个协议组成的： JSContext 是 JS 执行上下文，你可以把它理解为 JS 运行的环境。

5.7K0 0

js如何控制一次只加载一张图片，加载完成后再加载下一张

今天看到一个面试题，是关于img图片加载方面的，有必要记录一下。其实关于这个问题，只要知道图片什么时候加载完成就能解决了。...通过onload事件判断Img标签加载完成实现逻辑：新建一个Image对象实例，为实例对象设置src属性等，在onload事件中添加此实例对象到父元素中，然后将图片地址数组中的第一个元素剔除，继续调用此方法直到存储图片地址的数组为空...HTML文档渲染解析，如果解析到img标签的src时，浏览器就会立刻开启一个线程去请求图片资源。...一个属于HTML标签，另一个属于css样式，加载机制和解析顺序也不同。...一个完整的页面是由js、html、css组成的，按照解析机制，html元素会优先解析，尽管css样式是放在head标签内的，但也不意味着它会优先加载，它只有等到html文档加载完成后才会执行。

1431 0

前端-如何只用 CSS 完成漂亮的加载

为什么要做加载只想说, 本文最重要的是对 CSS, 伪元素, keyframe的分享, 以及读者对这些东西的真正掌握, 我并不是怂恿大家在每一个页面的前面都去加一个酷炫的加载我是如何做的不同的页面..., 对加载的设计也就可能不同....本文设计的加载适合大多数页面....正如你所看到的, 我们将经历 4 个步骤 1、边框一个接一个地出现 2、红/橙/白色方块向里滑入 3、方块向外划出 4、边框消失我们只需要 animation-direction: alternate 来完成步骤...-- for CSS, JS, and font files --> /*

9172 0

如何对图片是否加载完成进行断言

很多时候会遇到需要断言网页中图片是否加载完成来判断用例执行是否成功。而WebDriver只会检查DOM中是否有image 标记，而不能检查这个图片是否不可见或者坏掉。...此时我们的思路是利用javascript属性naturalWidth是否大于0去判断图片是否加载完成。

1.3K3 0

如何检测本页中的iframe是否“加载”完成

: 应用场景：iframe个人感觉最独特的应用之一就是配合P3P协议可以实现跨域写入cookie(好象除此之外，还没找到更有效的办法)，但是有时候我们不知道这个iframe页面是否执行完毕，有没有办法判断...value="ok"; } index.html: 检测本页中的所有iframe是否加载完成...，清除定时器 setValue("加载完成!")...; } else{ setValue(); } } 检测本页中的iframe是否加载完成加载完成

3.6K5 0

【说站】js如何实现类型判断

js如何实现类型判断 1、判断引用类型和基本类型的类型是不同的，判断基本类型可以用typeof： typeof 1 // 'number' typeof '1' // 'string' typeof...判断引用类型一般用instanceof： var obj = {} var arr = [] var fun = () => {} typeof obj // 'object' typeof arr ...function' obj instanceof Object // true arr instanceof Array // true fun instanceof Function // true 以上就是js...类型判断的实现，希望对大家有所帮助。...更多js学习指路：js教程推荐操作环境：windows7系统、jquery3.2.1版本，DELL G3电脑。

2.5K3 0

【春节日更】如何判断多图片加载完毕

在项目中，我们会遇到这样的需要，判断多图片加载完成，或者多个接口是否加载完成原理大致相同，本文就以判断多图片加载为例 01 单张图片还是，先来看看单张图片 onreadystatechange...this.readyState||this.readyState=='loaded'||this.readyState=='complete'){ // 加载完成...resolve(myImage) } }).then((myImage)=>{ //code }); 02 多张图片如何判断多张图片加载完成呢？...事件与flag的值来判断多张图片是否加载完成方法二： letimgArr= [ 'http://bugshouji.com/banner1.jpg', 'http://bugshouji.com...}) 分析：上面的方法，主要是通过onload事件与Promise.all方法结合来判断多张图片是否加载完成以上，就是判断单张图片与多张图片加载完成的方法，欢迎补充

9201 0

JS魔法堂：精确判断IE的文档模式by特征嗅探

1.5K9 0

预加载之——js 文件如何实现只加载不执行

性能优化很常见的一个方式是提前加载文件，本文讨论如何在其他依赖未加载情况下提前加载一个.js文件。...1.导出一个函数如果使用加载一个js 文件，如果加载的js 是一个自执行文件，那么会出现错误。...src="/test.js"> 使用标签会进行加载和执行，由于没有加载依赖函数bluer,控制台会出现以下问题： test.js:2 Uncaught...ReferenceError: bluer is not defined 如果要正确加载，可以在加载js 时是一个函数 //test2.js function test() { bluer(...); console.log(1) } 像这样改造之后确实是可以在提前在任何阶段加载js,但是改造成本比较大。

6.1K1 0

【说站】js中isBefore函数如何判断

js中isBefore函数如何判断 1、isBefore判断一个moment对象是否在某个时间点之前。...isBefore('2017-11-06', 'year')) console.log(moment('2017-11-03').isBefore('2018-11-06', 'year')) 以上就是js...中isBefore函数的判断方法，学会后赶快对moment对象进行判断吧。...更多js学习指路：js教程推荐操作环境：windows7系统、jquery3.2.1版本，DELL G3电脑。

2.4K3 0

如何用原生JavaScript检测DOM是否已加载完成？

在前端开发中，我们经常需要知道网页的DOM（文档对象模型）是否已经加载完毕。...本文将带你一步步了解如何实现这一点。什么是DOM？在讲具体方法之前，我们先来了解一下什么是DOM。DOM（文档对象模型）是网页的结构化表示，它将HTML文档表示为一个树形结构。...它们的区别在于： DOMContentLoaded事件在初始的HTML被完全加载和解析完成后触发，但不等待样式表、图片等资源加载。 load事件在页面所有资源（包括样式表、图片等）加载完成后触发。...我们可以使用这两个事件来确定页面的加载状态，并结合document.readyState属性来判断DOM是否已准备好。...在回调函数中，我们检查document.readyState属性的值：如果值是'complete'，表示DOM已经完全加载，所有资源也已经加载完成。

7791 0

【说站】javascript如何动态加载js文件

javascript如何动态加载js文件 1、动态的插入script标签来加载脚本。 ... callback(); } } script.src = url; document.body.append(script); } // 动态加载...js loadScript('file.js', function () { console.log('加载完成'); }) 2、通过xhr方式加载js文件，不过通过这种方式的话，就可能会面临着跨域的问题...此外，每个js文件都需要建立一个额外的http连接，并且4个25KB的文件比100KB的文件大。因此，最好将多个js文件合并为同一个并压缩代码。...以上就是javascript动态加载js文件的方法，希望对大家有所帮助。

7.3K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

js如何判断文档加载完成

1. `DOMContentLoaded`事件

2. `load`事件

遇到问题及解决方法

相关·内容

JS判断单、多张图片加载完成

判断图片是否加载完成

JavaScript——判断页面是否加载完成

前端JS判断远程文件是否加载

js判断iframe加载是否成功的方法

如何动态加载js？

如何判断js函数存在

网页image资源如何判断加载完毕

wkwebview加载完成_【Swift】WKWebView与JS的交互使用

js如何控制一次只加载一张图片，加载完成后再加载下一张

前端-如何只用 CSS 完成漂亮的加载

如何对图片是否加载完成进行断言

如何检测本页中的iframe是否“加载”完成

【说站】js如何实现类型判断

【春节日更】如何判断多图片加载完毕

JS魔法堂：精确判断IE的文档模式by特征嗅探

预加载之——js 文件如何实现只加载不执行

【说站】js中isBefore函数如何判断

如何用原生JavaScript检测DOM是否已加载完成？

【说站】javascript如何动态加载js文件

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

js如何判断文档加载完成

1. DOMContentLoaded事件

2. load事件

遇到问题及解决方法

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

1. `DOMContentLoaded`事件

2. `load`事件