全世界最短的domReady

如果你不考虑支持IE,现代浏览器为javascript添加了许多黑魔法,让我们能写出更强有力的代码,如下面介绍的domReady。


function r(f){/in/(document.readyState)?setTimeout(r,0,f):f()}

需要以下知识点了解其运作:

  1. document.readyState的五种状态,"uninitalized"、"loading"、"interactive"、"complete" 、"loaded",不过FF3.6+才开始支持此属性。
  2. 死去的ecma4为正则字面量添加的新特性,让它拥有像exec方法一样的行为。详见这里
  3. 现代浏览器的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);

	}



}

你可能感兴趣的:(ready)