jQuery ready回调函数的执行

1月 9, 2018 |

jQuery 推荐我们使用$(function(){})代替原来的window.onload=function(){} 这种方式,众所周知,$(callback)比后者能更早执行,前者只要dom结构加载完毕就可以执行,而后者需要整个页面加载完成,比如图片等元素加载后才会执行。所以前者能加快页面的响应速度。

在jquery-3.2.1.js 版本中该功能是通过Deferred对象实现的
Deferred的原理参考JQuery Deferred对象源码分析

// The deferred used on DOM ready
var readyList = jQuery.Deferred();
jQuery.fn.ready = function( fn ) {
	readyList.then( fn )
	...
};
	
function completed() {
	document.removeEventListener( "DOMContentLoaded", completed );
	window.removeEventListener( "load", completed );
	jQuery.ready();
}

// DOMContentLoaded事件或者load事件为页面ready的标志,如果该事件发生回调completed
document.addEventListener( "DOMContentLoaded", completed );
// A fallback to window.onload, that will always work
window.addEventListener( "load", completed );

//触发readyList
ready: function( wait ) {
      ...
	readyList.resolveWith( document, [ jQuery ] );
}

本文由javacoder.cn整理转载注明出处

Posted in: WEB开发

Comments are closed.