关于JS加载的问题

[dcren118]

当页面有大量JS需要加载的时候 有的时候会出现页面先显示出来了 ，但是JS没加载完 ！

当用户一点具体操作的时候 就会提示出错信息 ， 请问各位高手如何解决这个问题 ？？？

[CutBug]

没有onload完全之前，在页面加个遮蔽层，阻止用户操作，下面是遮蔽层代码，写入一个js，在页面引用这个js就可以，兼容IE/FF

<script>
createMask();
function createMask()
{ 
    document.write("<div id='shield'  style='Z-INDEX:1000;filter:alpha(opacity=10);BACKGROUND-COLOR:#cccccc;LEFT:0;WIDTH:100%;POSITION:absolute;TOP:0;HEIGHT:100%'><br>   <img src='images/loading.gif'>数据正在读入中,请稍等...</div>");
} 

if(document.addEventListener)//FF
{
    document.addEventListener("DOMContentLoaded",hiddenLay,null);
}else
{
    document.onreadystatechange=function()
    {
        
        hiddenLay(1);
    }
}

function hiddenLay()
{

     if(arguments[0]!=1||document.readyState=="complete")
     {
        document.getElementById("shield").style.display="none";
     }
}
</script>

[xiongzhijian]

1》页面加载延迟处理！
2》压缩js文件
3》回调函数

[囧]

1.
事件放到脚本文件里初始化...
如：

window.onload = function(){
    document.getElementById("btn").onclick = btn_onclick;
};
function btn_onclick(){
   ....
}

2.
在html页面里做个中转,用个全局变量标记页面是否加载完成，如完成则调用执行函数．．．

<script type="text/javascript">
    var isOK = false;
    window.onload = function(){
        isOK = true;
    };
    function test(){
        if(isOK){
            btn_onclick();
        }
    }
</script>
<input type="button" value="test" onclick="test()" />

呵呵，暂时就想到这２个方法．．．

[DeadlyRemind]

学习，上面说的很好。

[ZhangYaoxing]

这个问题可以很简单也可以很复杂，要看你要求可靠性到什么程度了。
楼上那是个办法，先盖起来，加载完成后打开让用户操作。但是仍然不完全可靠，因为假如有N个JS文件，这N个文件每个都有可能是最后一个加载完成的，那什么时候打开这个盖子就成问题了。当然一般来说JS文件不太多不太大的时候让它在最后一个打开就基本没什么问题了。
这个问题也困扰了我好久。现在我的想法是，要完全可靠的话，恐怕非得AJAX不可了，因为JS的<script>标签也没有onload事件。所以我打算先做一个简短的JS文件loader.js，再用它来发AJAX请求去获取其他的JS文件（可以一次获取多个，也可以先后获取，这个要看你JS文件之间互相的依赖关系了），获取之后不能用window.eval来使之生效（因为作用域的问题），所以只能再获取之后再创建script结点给加到页面上。但是因为已经获取过，所以这时候添加Script结点浏览器自己会知道从缓存中获取脚本（这个看看firbug报告的脚本加载时间就可以验证了）。也就是说所有脚本的获取在loader.js控制之下，所以loader.js自己可以负责什么时候打开那个盖子。
目前我也还只是依靠prototype的AJAX库去实现了一个概念验证的版本（实际上连prototype本身都应该用loader.js来加载的），所以没有什么代码好给LZ了。如果你想看这个验证脚本可以留下邮箱我发给你

[ZhangYaoxing]

to 4楼：
这样仍然是不完全可靠的，因为N个脚本加载完成的时机并不确定，所以当你的脚本之间互相有依赖的时候并不能保证被依赖的脚本先于依赖它的脚本被加载完成。比如在脚本A中定义了一个函数，在脚本B中调用这个函数，你并不能保证B引用的时候A已经加载完成

[囧]

to 7楼:

我写的都是在window.onload里,如果你认为还有脚本没加载完就执行onload函数的话,那期待你的高见..

[ZhangYaoxing]

to 8楼：
onload事件没你想的这么可靠，参考一下W3C的文档写得很清楚了，onload只是在页面加载完成的时候就会触发，并不是所有资源加载完成。所以当onload执行的时候其实页面上的img，js脚本一类的东西其实都有可能没有加载完。如果你这样用没有出问题，只能说是运气好，js脚本正好在你的onload之前加载完成了。实际上多数时候JS不复杂，长度不太长，这样都不会造成问题。但是LZ既然遇到了这个问题，就说明他的脚本已经具备一定规模了，所以我觉得他想讨论的是如何尽可能严密地去加载和执行脚本，所以我在6楼才写了这么大一篇来解释这个问题和我的看法。
PS：最初我也是尝试写在onload事件里面来解决问题的，不过脚本具备一定规模之后遇到了楼主现在遇到的问题，然后走了很多弯路去验证问题的所在以及寻求解决方案。所以现在看到有人遇到同样的问题特想冲上去握个手喊声“同志啊~~”呵呵玩笑。
其实我也还没去验证这么做了是不是就一定能很完美地解决这个问题，不过至少目前为止算是没有再出错。算是抛砖引玉吧，看看大家的意见。