如果你不考虑支持IE,现代浏览器为javascript添加了许多黑魔法,让我们能写出更强有力的代码,如下面介绍的domReady。
function r(f){/in/(document.readyState)?setTimeout(r,0,f):f()}
需要以下知识点了解其运作:
- document.readyState的五种状态,"uninitalized"、"loading"、"interactive"、"complete" 、"loaded",不过FF3.6+才开始支持此属性。
- 死去的ecma4为正则字面量添加的新特性,让它拥有像exec方法一样的行为。详见这里
- 现代浏览器的setTimeout支持更多参数,第二个参数后的参数用作回调函数的参数,见下面测试:
如果你一定要支持IE,就得把此方法写长一点:
function r(f){/in/.exec(document.readyState)?setTimeout('r('+f+')',0):f()}
或许有人会提到DOMContentLoaded事件,但那不能触发domReady之后添加的函数。当然这个迷你的domReady的能力与它的体积相称,不支持多投事件。要使用支持多投事件,请见我另一篇博文《我的domReady第三版》
附上其他domReady的迷你实现
//https://github.com/jed/alReady.js alReady = function( fn ) { var add = "addEventListener" , win = this , doc = win.document , pre = doc[ add ] ? "" : "on"; /m/( doc.readyState ) ? fn() : "load DOMContentLoaded readystatechange".replace( /\w+/g, function( type, i ) { ( i ? doc : win ) [ pre ? "attachEvent" : add ] ( pre + type, function(){ if ( fn ) if ( i < 6 || /m/( doc.readyState ) ) fn(), fn = 0 }, !1 ) }) }
https://github.com/dperini/ContentLoaded/blob/master/src/contentloaded.js function contentLoaded(win, fn) { var done = false, top = true, doc = win.document, root = doc.documentElement, add = doc.addEventListener ? 'addEventListener' : 'attachEvent', rem = doc.addEventListener ? 'removeEventListener' : 'detachEvent', pre = doc.addEventListener ? '' : 'on', init = function(e) { if (e.type == 'readystatechange' && doc.readyState != 'complete') return; (e.type == 'load' ? win : doc)[rem](pre + e.type, init, false); if (!done && (done = true)) fn.call(win, e.type || e); }, poll = function() { try { root.doScroll('left'); } catch(e) { setTimeout(poll, 50); return; } init('poll'); }; if (doc.readyState == 'complete') fn.call(win, 'lazy'); else { if (doc.createEventObject && root.doScroll) { try { top = !win.frameElement; } catch(e) { } if (top) poll(); } doc[add](pre + 'DOMContentLoaded', init, false); doc[add](pre + 'readystatechange', init, false); win[add](pre + 'load', init, false); } }