[Javascript][mootools]domready函数

我在Javascript编程中最喜欢的函数之一就是domready函数，这个函数可以让我们在页面dom载入完成后就执行页面上的函数，而不是象Javascript的原生事件window.onload，必须等待页面所有元素包括图片什么的完全载入才执行。

最近打算开始使用Mootools写点东西，然而，我在一开始就受到了一个打击。我发现Mootools的domready函数在IE下的执行表现可是叫我有点不开心。具体表现可见：示例1。

这页面上的XHTML代码是：

<div id="tabContainers">
    <div class="container">This is the content for the first tab.</div>
    <div class="container">This is the content for the second tab.</div>
    <div class="container">This is the content for the third tab.</div>
    <div class="container">This is the content for the fourth tab.</div>
</div>

JS代码是：

document.addEvent('domready',function(){
    $$('.container').hide();
    $$('.container:index(2)').show();
});

意思就是在DOM载入完成后，先将XHTML的四句话给隐藏掉，再显示第三句话。在FF下，表现很正常，页面打开后就是显示第三句，然后，在IE6/IE7下的表现就是上面的四句话会闪现一下再显示第三句，这可不是我想要的。

因为用渐进式增强编程思想来写代码时，是经常需要保证无JS/CSS的正常浏览。上面的代码，我可以在XHTML代码里通过CSS来控制让它们不显示，然后再通过JS来控制显现。但是如果在没有CSS和JS的情况下，就不能保证正常浏览了。虽然最终效果是我想要的，但是过程中的表现在IE下就有些差强人意。

而这种情况在我原来用Prototype.js时是不会出现的，所以我就比较了下他们对domready的实现，主要看的是IE部分。

Prototype.js:

document.write("<script id=__onDOMContentLoaded defer src=//:><"/script>");
    $("__onDOMContentLoaded").onreadystatechange = function() {
      if (this.readyState == "complete") {
        this.onreadystatechange = null;
        fireContentLoadedEvent();
      }
};

Prototype.js的这段代码主要来自于：Dean Edwards的window.onload(again) 。

Mootools.js:

var temp = document.createElement('div');
(function(){
    ($try(function(){
        temp.doScroll('left');
        return $(temp).inject(document.body).set('html', 'temp').dispose();
    })) ? domready() : arguments.callee.delay(50);
})();

 

Mootools.js的这段代码核心是Diego Perini的IEContentLoaded，不过Mootools又在其上加上了一些自己的东西，而IEContentLoaded的这段代码则是被Jquery的domready函数直接采用。我也使用Jquery写了段代码测试了下，发现并没有出现Mootools的问题。

所以最后我的解决方案是将Mootools的domready.js里的代码给换成了Prototype.js里的这个方法。测试了下，没有什么问题：示例2。

先这么着，有什么问题我再换回来。