js 判断文档加载完成

在JavaScript中，判断文档加载完成通常使用DOMContentLoaded事件或window.onload事件。

一、基础概念

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

window.onload事件
- 当整个页面（包括所有依赖的资源如样式表、图像等）都加载完成后触发。

二、相关优势

DOMContentLoaded
- 优势在于可以更快地执行脚本，因为它不需要等待所有资源加载完成。
window.onload
- 优势在于确保所有资源都已加载，适用于需要在所有资源加载完成后执行的操作。

三、应用场景

DOMContentLoaded
- 适用于DOM操作，如初始化插件、绑定事件等。
window.onload
- 适用于需要在页面完全加载后执行的操作，如图片尺寸调整、页面滚动效果等。

四、示例代码

使用DOMContentLoaded

document.addEventListener('DOMContentLoaded', function() {
    console.log('文档加载完成');
    // 在这里执行DOM相关的操作
});

使用window.onload

window.onload = function() {
    console.log('页面完全加载完成');
    // 在这里执行需要等待所有资源加载完成的操作
};

五、常见问题及解决方法

事件未触发
- 确保脚本在文档加载前执行，可以将脚本放在<head>标签内，并使用defer属性，或者将脚本放在<body>标签的底部。
- 检查是否有语法错误或其他脚本错误阻止了事件的绑定和触发。

事件触发顺序
- DOMContentLoaded总是在window.onload之前触发，如果需要确保某些操作在所有资源加载完成后执行，应使用window.onload。

通过以上方法，可以有效地判断文档加载完成，并在适当的时候执行相应的操作。

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

有帮助

没帮助

相关·内容

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

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魔法堂：精确判断IE的文档模式by特征嗅探

1.5K9 0

JS日期判断

window.onload = function() { //这么写是为了实现js代码与html...代码的分离，当我修改js时，不能影响html代码。

21.6K3 0

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

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

1431 0

Java加载js

Android 中可以通过webview来实现和js的交互，在程序中调用js代码，只需要将webview控件的支持js的属性设置为true Android（Java）与JavaScript（HTML）交互有四种情况...： 1） Android（Java）调用HTML中js代码 2） Android（Java）调用HTML中js代码（带参数） 3） HTML中js调用Android（Java）代码 4） HTML中js...脚本设置 Android（Java）与js（HTML）交互的接口函数是： mWebView.addJavascriptInterface(getHtmlObject(), "jsObj"); /.../ jsObj 为桥连对象 Android容许执行js脚本需要设置： webSettings.setJavaScriptEnabled(true); （2） js（HTML）访问Android（Java...Java）访问js（HTML）代码 Android（Java）访问js（HTML）端代码是通过loadUrl函数实现的，访问格式如：mWebView.loadUrl("javascript: showFromHtml

8.8K8 0

js滚动加载（无限加载）（转）

实现无限分页的过程大致如下： 1 视窗滚动到底部 2 触发加载，添加到现有内容的后面。因此，可能会出现两种情况： 1 当页面的内容很少，没有出现滚动条。 2 当页面的内容很多，出现了滚动条。...实现的思路： 1 如果真实的内容比视窗高度小，则一直加载到超过视窗 2 如果超过了视窗，则判断下面隐藏的部分的距离是否小于一定的值，如果是，则触发加载。（即滚动到了底部）

17.5K2 0

js 判断循环引用

(obj3)); console.log(isLoop(obj4)); console.log(isLoop(obj5)); console.log(isLoop(obj6)); 这里我看了JONS-js

18.8K1 0

js判断空对象

假设你想检查你的值是否等于空对象，可以使用对象文字语法创建: const emptyObject = {} 如何判断它是一个空对象？使用Object.entries()方法。...你还应该确保对象实际上是一个对象，通过检查它的构造函数是对象对象: objectToCheck.constructor === Object Lodash是一个流行的库，它提供了isEmpty()函数判断是否是空对象...，简化了操作: _.isEmpty(objectToCheck) 类似的使用Object.entries方法，我们还可以使用Object.keys()和Object.values()来判断，判断方法很相似

18.5K3 0

js 判断user agent

var UserAgent = { useragent:window.navigator.userAgent.toLowerCase(), a...

10.8K7 0

js判断空数组

方法一 Array.isArray && arr.length 通过Array.isArray来判断是否为数组，再通过length属性。...只是判断数组的方法不一样而已。使用typeof来检测是否为数组，再通过length属性。...arr && typeof arr === "object" && arr.constructor === Array && arr.length 注：typeof判断数组和null的时候返回的是”object

22K0 0

js判断密码强度

在做管理系统是经常会遇到修改密码的情况，这时，我们需要检测用户输入的密码来判断密码的复杂程度，即密码强度，如下图 ? 判断密码强度的原理其实就是判断用户输入密码的位数，包含输入字符的种类。...下面来看一下代码 JS判断密码强度 //判断输入密码的类型 function

18.2K2 0

js 导航判断高亮

前几天有个同学问说他有个 cms 没有 if 判断标签，php 还不会写，我就给他写了个能用的 jq，原理就是通过判断地址栏的链接和代码里导航部分的链接一致的话就高亮，分享出来给大家参考。...js_Current.zip js_Current js"> js"> <...部分 $(document).ready(function(){ if(String(window.location).indexOf("php")判断是否是首页.文件后缀 $(".nav

16.6K2 0

js对象判断方法

// 判断对象的方法 let obj6 = { a: 1, b: 2 }; // 1. typeof console.log(typeof obj6 === "object"); // 2. instanceof

12.9K2 0

如何动态加载js？

第三方的js文件，自己写的js文件，js越来越多了怎么办？提出问题： 1、js文件太多了，每个页面都写太麻烦。 2、如果路径变化了，或者js名称变化了怎么办？...3、如何约束js文件的加载顺序？a.js定义了一个函数，b.js要调用，但是b.js先加载了，a.js还没加载完成，造成函数未定义，无法调用。 4、js文件的合并。...5、加载js完毕之后，要可以执行回调函数。解决问题：如何解决这些问题呢？我想到的办法是——动态加载js。就是通过js代码的方式来加载。...弄了好久才发现，原来是js文件会被加载多次。为什么被加载了多次呢？原因在于 onreadystatechange 和 onload 。为什么这两个事件都调用了callback？...老办法，判断浏览器类型。如果是IE10，那么只设置onload。然后，世界安静了。当然这里浏览器的类型判断还不完全。浏览器太多了，遇到不兼容的在考虑吧，俺js其实很烂的。

12.8K5 0

JS懒加载实现

标签呈现在当前浏览器可视窗口时，动态设置img标签的src属性相关API document.documentElement.clientHeight：获取屏幕可视区域的高度 element.offsetTop：获取元素相对于文档顶部的高度...document.documentElement.scrollTop：滚动条滚动的距离图示图片来源【https://zhuanlan.zhihu.com/p/55311726】当图片的距离文档顶部的高度...i<images.length;i++){ if(images[i].offsetTop - S < H){ console.log(`第${i}个图片触发了懒加载...window.onload = window.onscroll = function(){ lazyImg(imgs) } 上述代码已经实现了一个基本的懒加载，但是存在性能问题我们使用防抖函数优化一下...delay); } } window.onload = window.onscroll = debounce( function(){ lazyImg(imgs) },1000) 到此完成图片懒加载实现

8.8K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

js 判断文档加载完成

相关·内容

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

判断图片是否加载完成

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

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

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

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

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

JS日期判断

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

Java加载js

js滚动加载（无限加载）（转）

js 判断循环引用

js判断空对象

js 判断user agent

js判断空数组

js判断密码强度

js 导航判断高亮

js对象判断方法

如何动态加载js？

JS懒加载实现

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

js 判断文档加载 完成

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

js 判断文档加载完成