[Javascript][mootools]domready函数

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

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

这页面上的XHTML代码是：

Code
1<div id="tabContainers">
2    <div class="container">This is the content for the first tab.</div>
3    <div class="container">This is the content for the second tab.</div>
4    <div class="container">This is the content for the third tab.</div>
5    <div class="container">This is the content for the fourth tab.</div>
6</div>

JS代码是：

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

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

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

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

Prototype.js:

Code
1document.write("<script id=__onDOMContentLoaded defer src=//:><"/script>");
2    $("__onDOMContentLoaded").onreadystatechange = function() {
3      if (this.readyState == "complete") {
4        this.onreadystatechange = null;
5        fireContentLoadedEvent();
6      }
7};

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

Mootools.js:

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

 

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

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

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

转载于:https://www.cnblogs.com/noidea/archive/2008/12/17/1356976.html