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

JavaScript
JavaScript

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

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

但是，这个不能完全模拟 jQuery 的 $(document).ready(function(){}) 方法，如果在 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 加载后立即运行，如果未加载，等待其加载完毕就立即运行。

Leave a Reply

VisitorWelcome