一种等价于jQuery.ready()的原生JavaScript写法

JavaScript
JavaScript

现代网络浏览器—包括 IE9 及以上—提供一种简单的方法支持在 DOM 完全加载后执行脚本:

document.addEventListener( 'DOMContentLoaded', function () {
	// Do stuff...
}, false );

但是,这个不能完全模拟 jQuery 的 $(document).ready(<strong>function</strong>(){}) 方法,如果在 DOM 内容已经加载后使用 addEventListener,那么其监听的事件已经加载发生,所以永远不会触发事件。

好在有一种相当简单,轻量的辅助方法可以代替,你可以使用下面的代码:

/**
 * Is the DOM ready?
 *
 * This implementation is coming from https://gomakethings.com/a-native-javascript-equivalent-of-jquerys-ready-method/
 *
 * @param {Function} fn Callback function to run.
 */
function isDomReady( fn ) {
	if ( typeof fn !== 'function' ) {
		return;
	}

	if ( document.readyState === 'interactive' || document.readyState === 'complete' ) {
		return fn();
	}

	document.addEventListener( 'DOMContentLoaded', fn, false );
}

isDomReady( function() {
	//
} );

这段代码将在 document 加载后立即运行,如果未加载,等待其加载完毕就立即运行。

如果您觉得有用就请点赞和分享
0

发表评论