$(document).ready()source

我需要在JavaScript中等待文档准备就绪,在正文的底部插入一个div。

我想要:

  • 使这个JavaScript文件尽可能小(如果可能,将其编译为<1kb)
  • 内联在闭包中提供文档就绪的代码(不导出它)

在我的文件中内联整个jQuery源代码太大了,所以我正在寻找其他方法。 window.onload会工作,但我特别想要文档准备,而不是等待window.onload事件。

有谁知道可以做到这一点的JS片段? 或者我应该只复制jQuery的部分源代码?

编辑:

我设法抓取jQuery源代码并将以下代码段放在一起:

 var ready = (function () { var ready_event_fired = false; var ready_event_listener = function (fn) { // Create an idempotent version of the 'fn' function var idempotent_fn = function () { if (ready_event_fired) { return; } ready_event_fired = true; return fn(); } // The DOM ready check for Internet Explorer var do_scroll_check = function () { if (ready_event_fired) { return; } // If IE is used, use the trick by Diego Perini // http://javascript.nwbox.com/IEContentLoaded/ try { document.documentElement.doScroll('left'); } catch(e) { setTimeout(do_scroll_check, 1); return; } // Execute any waiting functions return idempotent_fn(); } // If the browser ready event has already occured if (document.readyState === "complete") { return idempotent_fn() } // Mozilla, Opera and webkit nightlies currently support this event if (document.addEventListener) { // Use the handy event callback document.addEventListener("DOMContentLoaded", idempotent_fn, false); // A fallback to window.onload, that will always work window.addEventListener("load", idempotent_fn, false); // If IE event model is used } else if (document.attachEvent) { // ensure firing before onload; maybe late but safe also for iframes document.attachEvent("onreadystatechange", idempotent_fn); // A fallback to window.onload, that will always work window.attachEvent("onload", idempotent_fn); // If IE and not a frame: continually check to see if the document is ready var toplevel = false; try { toplevel = window.frameElement == null; } catch (e) {} if (document.documentElement.doScroll && toplevel) { return do_scroll_check(); } } }; return ready_event_listener; })(); // TEST var ready_1 = function () { alert("ready 1"); }; var ready_2 = function () { alert("ready 2"); }; ready(function () { ready_1(); ready_2(); }); 

非常感谢您帮助我在jQuery源代码中找到它。 我现在可以将所有这些放在一个闭包中并在不导出任何函数和污染全局范围的情况下完成我的工作。

一种选择是从github获取core.js jQuery文件。

对于你不需要的代码,你可能会减少很多。 然后通过YUI压缩器运行它,它应该很小。

我试过了,这段代码运行正常:

 $(function() { var newDiv = document.createElement('div'); document.getElementsByTagName('body')[0].appendChild(newDiv); }); 

更新:这和我一样小。 它完全来自jQuery ,大约是1,278字节(压缩)。 当你gzip时应该变小。

唯一的区别是你需要称之为:

 $.fn.ready(function() { // your code }); 

YUI压缩:

 (function(){var e=function(i,j){},c=window.jQuery,h=window.$,d,g=false,f=[],b;e.fn={ready:function(i){e.bindReady();if(e.isReady){i.call(document,e)}else{if(f){f.push(i)}}return this}};e.isReady=false;e.ready=function(){if(!e.isReady){if(!document.body){return setTimeout(e.ready,13)}e.isReady=true;if(f){var k,j=0;while((k=f[j++])){k.call(document,e)}f=null}if(e.fn.triggerHandler){e(document).triggerHandler("ready")}}};e.bindReady=function(){if(g){return}g=true;if(document.readyState==="complete"){return e.ready()}if(document.addEventListener){document.addEventListener("DOMContentLoaded",b,false);window.addEventListener("load",e.ready,false)}else{if(document.attachEvent){document.attachEvent("onreadystatechange",b);window.attachEvent("onload",e.ready);var i=false;try{i=window.frameElement==null}catch(j){}if(document.documentElement.doScroll&&i){a()}}}};d=e(document);if(document.addEventListener){b=function(){document.removeEventListener("DOMContentLoaded",b,false);e.ready()}}else{if(document.attachEvent){b=function(){if(document.readyState==="complete"){document.detachEvent("onreadystatechange",b);e.ready()}}}}function a(){if(e.isReady){return}try{document.documentElement.doScroll("left")}catch(i){setTimeout(a,1);return}e.ready()}window.jQuery=window.$=e})(); 

完整源代码(再次,这是jQuery代码):

 (function() { var jQuery = function( selector, context ) { }, _jQuery = window.jQuery, _$ = window.$, rootjQuery, readyBound = false, readyList = [], DOMContentLoaded; jQuery.fn = { ready: function( fn ) { jQuery.bindReady(); if ( jQuery.isReady ) { fn.call( document, jQuery ); } else if ( readyList ) { readyList.push( fn ); } return this; } }; jQuery.isReady = false; jQuery.ready = function() { if ( !jQuery.isReady ) { if ( !document.body ) { return setTimeout( jQuery.ready, 13 ); } jQuery.isReady = true; if ( readyList ) { var fn, i = 0; while ( (fn = readyList[ i++ ]) ) { fn.call( document, jQuery ); } readyList = null; } if ( jQuery.fn.triggerHandler ) { jQuery( document ).triggerHandler( "ready" ); } } }; jQuery.bindReady = function() { if ( readyBound ) { return; } readyBound = true; if ( document.readyState === "complete" ) { return jQuery.ready(); } if ( document.addEventListener ) { document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false ); window.addEventListener( "load", jQuery.ready, false ); } else if ( document.attachEvent ) { document.attachEvent("onreadystatechange", DOMContentLoaded); window.attachEvent( "onload", jQuery.ready ); var toplevel = false; try { toplevel = window.frameElement == null; } catch(e) {} if ( document.documentElement.doScroll && toplevel ) { doScrollCheck(); } } }; rootjQuery = jQuery(document); if ( document.addEventListener ) { DOMContentLoaded = function() { document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false ); jQuery.ready(); }; } else if ( document.attachEvent ) { DOMContentLoaded = function() { if ( document.readyState === "complete" ) { document.detachEvent( "onreadystatechange", DOMContentLoaded ); jQuery.ready(); } }; } function doScrollCheck() { if ( jQuery.isReady ) { return; } try { document.documentElement.doScroll("left"); } catch(e) { setTimeout( doScrollCheck, 1 ); return; } jQuery.ready(); } window.jQuery = window.$ = jQuery; })(); 

我确信有更多字节可以删除。

别忘了:

 /*! * jQuery JavaScript Library v1.4.2 * http://jquery.com/ * * Copyright 2010, John Resig * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license */ 

“DOMReady”函数有几种实现,但我发现的大多数都看似有点过时,所以我不知道它们将如何与IE8等表现。

我建议使用jQuery的ready(),因为我认为它承诺最大的跨浏览器兼容性。 我不是jQuery源代码的专家,但这似乎是正确的位置(第812-845行或搜索function bindReady )。

你可以从脚本开始: http : //snipplr.com/view/6029/domreadyjs/ ,虽然没有针对最新的Safari进行优化(但是工作)(例如使用计时器而不是支持的DOMContentLoaded)。