JavaScript权威指南|检测DOM是否解析完毕

最新推荐文章于 2020-11-30 16:47:08 发布

Xdercoding

最新推荐文章于 2020-11-30 16:47:08 发布

阅读量738

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端

本文链接：https://blog.youkuaiyun.com/remian/article/details/40263589

本文探讨了在JavaScript中如何实现仅等待文档解析完成就执行指定函数，主要介绍了DOMContentLoaded事件和doScroll检测法，结合jQuery的$(document).ready()函数进行讲解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇写了JavaScript权威指南里的一个whenReady的函数，该函数只是等文档解析完毕，图片加载完成，并且异步脚本也已经执行后才会执行传递给whenReady的函数，那么如何实现只等文档解析完成就能执行传递给whenReady的函数呢？看了$(document).ready()实现方法，主要包括DOMContentLoaded事件和doScroll检测法，实现的方法如下：

/* 传递函数给whenReady()，当文档解析完毕时且为操作准备就绪时，
 * 函数将作为文档对象的方法调用
 * DOMContentLoaded、readystatechange或load事件发生时会触发注册函数
 * 一旦文档准备就绪，所有函数都将被调用，任何传递给whenReady()的函数都将立即调用
 */

var whenReady = (function() {
	var funcs = []; // 当获得事件时，要运行的函数
	var isReady = false; // 当触发事件处理程序时，切换到true

	// 当文档准备就绪时，调用事件处理程序
	function handler(e) {
		// 如果已经运行过一次，只需要返回
		if (isReady) return;

		if (document.addEventListener || e.type == "load" || document.readystate == "complete") {
			detach();
			ready();
		}
	}

	// Clean-up method for dom ready events
	function detach() {
		if (document.addEventListener) {
			document.removeEventListener("DOMContentLoaded", handler, false);
			window.addEventListener("load", handler, false)
		} else