jQuery中的ready事件原型,在这里提取出来便于理解,代码+注释 如下:
// 事件队列 var EventQueue = null; // 是否已经执行过了,只执行一次 var isFire = false; //添加ready事件 function addReadyEvent(fn){ if(!EventQueue) EventQueue = []; if(document.readyState == 'complete'){ fn(); }else{ EventQueue.push(fn); } } // 触发ready事件 function fireReadyEvent(){ if(!isFire){ var fn,i=0; if(EventQueue){ while(fn = EventQueue[i]){ fn(); i++; } EventQueue = null; } isFire = true; } } // 绑定ready事件 function bindReady(){ if(document.addEventListener){ // 标准浏览器DOM加载完毕后执行队列,并卸载事件 document.addEventListener('DOMContentLoaded',unbindReady,false); // 确保会执行 window.addEventListener('load',fireReadyEvent,false); }else if(document.attachEvent){ // IE浏览器加载事件变化的时候执行unbindReady document.attachEvent('onreadystatechange',unbindReady); // 确保会执行 window.attachEvent('onload',fireReadyEvent); } var toplevel = false; // 是否顶层对象 try { toplevel = window.frameElement == null; } catch(e) {} if ( document.documentElement.doScroll && toplevel ) { // IE通过判断doScroll,在onreadystatechange = 'complete' 之前执行 doScrollCheck(); } } function doScrollCheck() { if ( isFire ) { return; } try { // IE下加载BODY后即可正常执行doScroll() document.documentElement.doScroll("left"); } catch( error ) { // 循环执行doScroll setTimeout( doScrollCheck, 1 ); return; } // doScroll成功后执行队列 fireReadyEvent(); } // 移除绑定事件并执行队列 function unbindReady(){ if(document.addEventListener){ //标准浏览器支持DOMContentLoaded事件 document.removeEventListener('DOMContentLoaded',unbindReady,false); fireReadyEvent(); }else if(document.attachEvent){ if(document.readyState === 'complete'){ // IE浏览器支持complete事件 document.detachEvent('onreadystatechange',unbindReady); fireReadyEvent(); } } } bindReady(); window.onload = function(){ console.log('LOAD加载完毕!'); } addReadyEvent(function(){ console.log('DOM加载完毕1!'); }); addReadyEvent(function(){ console.log('DOM加载完毕22!'); }) addReadyEvent(function(){ console.log('DOM加载完毕33!'); })
相关推荐
3. 对于Internet Explorer,使用document.write()向页面中添加一个带有defer属性的script元素,并通过该script元素加载完成来模拟DOMContentLoaded事件。 Prototype的实现方式虽然具有兼容性,但也存在一些问题。...
理解并掌握DOMReady的原理和使用,对于优化用户体验、提升页面加载速度具有重大意义。本文将深入探讨“前端项目-domready.zip”这个压缩包中所包含的现代DOMReady实现,并分析其在实际项目中的应用。 首先,...
首先,jQuery在页面加载完成后的DOMReady事件处理中扮演了核心角色。通过`$(document).ready(function() {...})`或简写形式`$(function() {...})`,开发者可以确保在执行任何操作之前,HTML文档已经完全加载并解析。...
以上只是35个经典实例的一部分,实际文档可能包括更多如表单操作、DOMReady事件、事件代理等内容。通过学习和实践这些实例,你将能更熟练地使用jQuery,提高开发效率,同时提升页面交互的用户体验。对于初学者来说,...
10. **扩展与自定义**:一个好的jQuery相册插件应该具有良好的可扩展性,允许开发者根据需求添加自定义功能,如分页、幻灯片播放、图片懒加载等。 以上是对"有缩略图的jQuery相册代码"项目的主要知识点分析,实际...
总结以上,jQuery通过事件包装、扩展原生事件处理函数及处理domReady状态,巧妙地解决了各种浏览器的兼容性问题,并为开发人员提供了一个高效、一致的事件处理机制。在深入理解了jQuery的这些机制后,开发者可以更加...
`domReady`是一个JavaScript编程中的常见概念,它指的是在网页的文档对象模型(Document Object Model,简称DOM)加载完成但...通过理解`domReady`的工作原理和实现方式,开发者能够更有效地控制页面加载时的脚本执行。
- **代码优化**:压缩和合并JavaScript文件,减少HTTP请求,提高页面加载速度。 - **性能考虑**:避免在DOMReady事件中进行不必要的操作,利用事件委托优化性能。 - **错误处理**:提供良好的错误处理机制,便于调试...
需要注意的是,`load`事件在整个页面中只能被添加一次,而`domready`事件可以多次添加,这在某些场景下可能会带来便利。 #### 结语 Mootools 1.4的事件处理机制不仅强大而且灵活,为开发者提供了丰富的工具来创建...
- 如何在页面上同时使用jQuery和其他JavaScript库,如AngularJS、React等,了解`$.noConflict()`的作用。 以上内容涵盖了jQuery面试中可能涉及的主要知识点,深入理解和熟练掌握这些内容,将有助于你在面试中展现...
- 在包含iframe的页面中,使用`document.write`和`defer`的方式可能会等到iframe内容加载完后才触发事件,与`onload`事件无异。 - Webkit新版本支持`DOMContentLoaded`事件,所以这部分代码可以优化。 2. **...
1. 此方法采用jQuery来实现广告的浮动效果,利用了DOMReady事件确保在文档完全加载之后执行。 2. 详细步骤解析: - 通过jQuery选择器获取浮动广告对象$sidebar以及窗口对象$window,同时获取浮动广告相对于文档...
这一函数是管理页面加载顺序和时机的核心部分,它确保了页面的DOM元素完全加载并可被脚本操作之后,才执行包裹在其中的代码。 ### 知识点:jQuery的$(document).ready()函数 #### 1. DOM加载时机和重要性 DOM...
在现代网页开发中,页面加载速度是一个非常关键的因素,它直接关系到用户体验。传统的JavaScript代码在页面加载完成后执行,这可能会在很大程度上影响页面的渲染效率,特别是在包含大量JavaScript脚本的页面中。...
转换到原生JS的好处包括减少页面加载时间,提高性能,以及更好地理解和控制代码。同时,随着Web组件和模块化的发展,原生JS的灵活性和可维护性也变得更为重要。 在实践过程中,我们可以创建一个小型的工具库,包含...
在Dojo 1.7.2版本中,开发者可以发现这个版本相较于之前的版本进行了优化,删除了一些冗余的JavaScript文件,这有助于减少代码体积,提高页面加载速度,并使得整个库更加轻量化。 Dojo的模块化系统(AMD,...
然而,如果图片或其他资源还未加载完成,使用`window.onload`事件可能会延迟脚本的执行,导致用户体验下降。特别是当页面包含大量图片时,用户可能会在DOM加载完成后就开始浏览,但此时依赖`window.onload`触发的...
动态加载JavaScript意味着在页面加载时并不立即执行所有的脚本,而是根据需要按需加载。这样可以提高页面性能,减少初始加载时间,同时还能降低网络带宽的消耗。 例如,`<xp:scriptBlock>`是XPages中的一个组件,...