100分求一个关于页面预加载的难题，

Question

<input type='text'  name='my_map' id='my_map' value='' />
/*
 只有上面一句是显示页面的时候加载的，我想实现的功能是下面的所有语句，包括引入js脚本
都在window.onload完毕之后才运行或者说是加载，原因是加载那两个js文件需要浪费很多的时候，
实验了好多方法都不行，没办法，有这方面经验的朋友看一下吧。
*/
<script language='javascript' src='http://api.51ditu.com/js/maps.js'></script>
<script language='javascript' src='http://api.51ditu.com/js/ezer.js'></script>
<script language='javascript'>
function setpoint(point,zoom)
{
var jd = point.getLongitude();
var wd = point.getLatitude();
document.getElementById('my_map').value = jd + ',' + wd + ',' + zoom;
}
ezer = new LTEZMarker('ezer');
ezer.setPlaceList(false);
ezer.setSearch(true,'枣庄');
ezer.setDefaultView('zaozhuang',3);
LTEvent.addListener(ezer,'',setpoint);
//在每次用户完成标注的时候执行
</script>

Answer 1

楼主是想在 页面加载完后 才加载 JS ,还是在加载页面时就加载JS??
我看得不是太清楚!!

Answer 2

哦,,
 是不是 <input type='text'  name='my_map' id='my_map' value='' /> 的value值 不是你想要的??还是'input ' 里面没有值?? 

Answer 3

var pstate = document.getElementById('areaCity').readyState;
            var hiddenCity = document.getElementById('cityValue').value;
            if(pstate == 'loaded' || pstate == 'complete')
            {
                checkSelectOption("areaCity", hiddenCity);
            }
            else
            {
                window.setTimeout('onloadCity()',400);
            }
这是我代码的一部分;'areaCity' 这个是城市列表,由JS 加载; 'cityValue' 是城市的值 
我判定他是否加载完毕,是的话就 执行 赋值 checkSelectOption("areaCity", hiddenCity);,没有加载完毕的话,再去 执行一次加载数据window.setTimeout('onloadCity()',400); 直到可以赋值为止;; 
  这是刚才我发的一个回贴,不知有用否？

Answer 4

简单的办法是直接引入所有的JS文件，然后把这段放进window.onload里
ezer = new LTEZMarker('ezer');
ezer.setPlaceList(false);
ezer.setSearch(true,'枣庄');
ezer.setDefaultView('zaozhuang',3);
LTEvent.addListener(ezer,'',setpoint);我并不是很明白你为什么要把包括JS在内的所有东西都放到window.onload里面去加载，因为即使是觉得它们拖慢了速度的话，把它们放到window.onload之后只会造成这几个脚本的加载速度更慢。再者放进onload里再加载的话，可能会遇到加载顺序的问题，因为哪个脚本会先下载完成是不确定的事情。如果那两个脚本没有互相依赖还好，一有依赖就根本没法处理了，除非AJAX去，这样取回来之后又会有个很复杂的过程，最近为这事掉了不少头发。
我觉得你的页面应该没有这么复杂，简单解释下到底是想要干什么吧，应该有简单的实现办法。

Answer 5

<script>//JS加载的优先级大于HTML加载优先级，所以这里的js会被优先加载
var __timeId = setInterval('test()',800);
var __loadFinishedFlag = false;window.onload = function(){
// your code

//当你要做完的任务完成之后，这里修改 __loadFinishedFlag = true; 告知浏览器，你上面的任务完成了，然后 test() 里面会清空定时器
__loadFinishedFlag = true;
}
function test(){
if(__loadFinishedFlag){

document.write('your js file');
}else{
//last clear timeId
clearInterval(__timeId);
}
}</script>

Answer 6

加为加载地图js的速度很慢啊？所以想在页面下载完毕之后再去加载它，因为标注函数需要用到地图js,
所以也必须放到onload事件之后。

Answer 7

原理：用XMLHTTP取得要脚本的内容，再创建 Script 对象。主页面代码：
<script language="JavaScript"> function GetHttpRequest() {     if ( window.XMLHttpRequest ) // Gecko         return new XMLHttpRequest() ;     else if ( window.ActiveXObject ) // IE         return new ActiveXObject("MsXml2.XmlHttp") ; } function AjaxPage(sId, url){     var oXmlHttp = GetHttpRequest() ;     oXmlHttp.OnReadyStateChange = function()      {         if ( oXmlHttp.readyState == 4 )         {            if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 )             {                IncludeJS( sId, url, oXmlHttp.responseText );            }             else             {                 alert( 'XML request error: ' + oXmlHttp.statusText + ' (' + oXmlHttp.status + ')' ) ;             }         }     }     oXmlHttp.open('GET', url, true);     oXmlHttp.send(null); } function IncludeJS(sId, fileUrl, source) {     if ( ( source != null ) && ( !document.getElementById( sId ) ) ){         var oHead = document.getElementsByTagName('HEAD').item(0);         var oScript = document.createElement( "script" );         oScript.language = "javascript";         oScript.type = "text/javascript";         oScript.id = sId;         oScript.defer = true;         oScript.text = source;         oHead.appendChild( oScript );     } } AjaxPage( "scrA", "b.js" ); alert( "主页面动态加载JS脚本。"); alert( "主页面动态加载a.js并取其中的变量：" + str ); </script>
现在完成了一个JS脚本的动态加载。
var Rash=true; 
var msg=""; 
function norash() 
{ 
if (confirm("确定要取消吗")) 
Rash=false; 
} 
 function rashit() 
{ 
setInterval('getrss()',Inttime); 
} 
function getrss() 
{ 
        if (Rash==true) 
        { 
        head=document.getElementsByTagName('head').item(0); 
        script=document.createElement('script'); 
        script.src='INCLUDE/AutoUpdate.asp'; 
        script.type='text/javascript'; 
        script.defer=true; 
        void(head.appendChild(script)); 
        window.status=msg; 
        } 
} 
rashit();

Answer 8

注意：a.js必须用UTF8编码保存，要不会出错。因为服务器与XML使用UTF8编码传送数据。

Answer 9

我倒是感觉奇怪了，a.js在ie7.0下面可以是gb编码，但在ie6下面必须是utf8编码，不知道为什么。

Answer 10

嗯，没别的意思，但是我想说11楼你的做法是有问题的
首先，你在发AJAX请求的时候分了情况判断浏览器类型，虽然没有覆盖得很完整。但是后面又用到.item(0), defer等一类IE才支持的用法，所以前面的判断可以说是白费了。另外，印象中IE6所支持的ActivXObject应该是Microsoft.XmlHttp，而你用了MsXml2.XmlHttp，所以实际上到头来你的代码只支持IE7而已。
其次，LZ提到了两个JS中后者是要依赖前者的，而你的代码并不能保证LZ的代码按顺序加载。
再次，defer对inline的JS代码是无效的，也就是说这样一来你并不能保证代码是在HTML加载加载完成之后执行的。然后再说说LZ的问题，
你是在onload里面还做了其他的事情吗？以至于页面需要等地图加载完成的时间里其他功能也无法实现？

Answer 11

感谢楼上朋友的回答，我提出的问题好像有一定的难度，那就将就着用吧，关键是显示地图的时候，我想
页面加载完毕之后再显示，地图，其原因就是加载地图js脚本太慢了，所以想这样做，但下面的思路报错
不知道有没有什么好的解决办法，<!--创建地图，并且给地图加个简易缩放控件-->
<script language="javascript">
function map_show(x,y,z,lable)
{

var maps = new LTMaps( "myMap" );
maps.centerAndZoom (new LTPoint(x,y),z);
var c = new LTSmallMapControl();
maps.addControl(c);
var point = new LTPoint(x,y);
var er = new LTMarker( point );
maps.addOverLay( er );
var text = new LTMapText( er );
text.setLabel( "<div style='padding:3px;'>肯德基</div>" ); 
maps.addOverLay( text ); 
maps.handleKeyboard(); //键盘操作支持
maps.handleMouseScroll();//鼠标滚轮支持
var control1 = new LTStandMapControl();//标准缩放控件
maps.addControl( control1 );
}
function loadScript(path)//动态加载js脚本
{
var script = document.createElement("script");
script.src = path;
document.body.appendChild(script);
}window.onload = function()
{
loadScript("http://api.51ditu.com/js/maps.js");
loadScript("http://api.51ditu.com/js/ezer.js");
map_show(11753613,3485354,4,"可");
}
</script>
<html>
<body>
<div id="myMap" style="position:relative; width:285px; height:400px;"></div>
</body>
</html>

Answer 12

window.onload = function()
{
loadScript("http://api.51ditu.com/js/maps.js");
loadScript("http://api.51ditu.com/js/ezer.js");
map_show(11753613,3485354,4,"可");
}
/*
接着楼上的来，我个人估计有可能是
loadScript("http://api.51ditu.com/js/maps.js");
loadScript("http://api.51ditu.com/js/ezer.js");
这两句之后，直接执行map_show()函数的话，是不行的，有可能加载的js中的变量或者函数没有加载完毕
不知道在map_show()函数调用之前如何判断一下加载 的js有没有加载完毕或者成功！
*/

Answer 13

/*
修改成这样也不行，急死了。请大家看一下吧
*/
setTimeout(map_show(11753613,3485354,4,"可"),2000);

Answer 14

谢谢，我不是在用google的地图api
我是用51的现成品

Answer 15

17,18楼肯定都是不对的，就是你17楼说的那个原因。
还是劝你别弄这么复杂，因为放到onload里再加载地图跟一开始就加载并不会有明显的速度提升，用户体验也没明显的变化，反而让代码结构变复杂了很多，不值得。
而且地图代码加载慢，也只能说明你从你那里访问
http://api.51ditu.com/js/maps.js
http://api.51ditu.com/js/ezer.js
这两个地址的速度很慢，并不能代表普遍的状况。就算大家都慢，那就代表51地图的服务器状况不好，你做什么都无济于事的。我最近也在为代码加载的问题苦恼，虽然解决了，但是我的代码是基于prototype的，恐怕对你也没多大帮助。
var DEBUG = true;
var BASE_JS_URL = "/includes/javascript/";
var scripts = [{
name: "effects.js"
}, {
name: "billpromotions.js"
}, {
name: "effect_wrapper.js"
}, {
name: "dragdrop.js"
}, {
name: "popup.js"
}, {
name: "general.js"
}, {
name: "Pagebase.js"
}, {
name: "ada_key.js"
}, {
name: "top_menu.js"
}, {
name: "gallery.js"
}, {
name: "videos.js"
}, {
name: "quote.js"
}, {
name: "playlist.js"
}, {
name: "map_lib.js"
}, {
name: "billboard.js"
}, {
name: "promotions.js"
}, {
name: "map.js"
}, {
name: "explorer.js"
}];
function loadJS() {
if (DEBUG) {
alert("Application is running in debug mode.\n"
+ "To disable debug mode, modify the following line in prototype.js:\n"
+ "var DEBUG=false;");
}
var loadedCount = 0;
scripts.each(function(script, index) {
new Ajax.Request(BASE_JS_URL + script.name, {
method: "GET",
evalJS: false,
onComplete: function(response) {
script.content = response.responseText;
loadedCount++;
if (loadedCount != scripts.length) 
return;
try {
var scriptContent = "";
scripts.each(function(script, index) {
scriptContent += script.content + "\n";
});
if (Prototype.Browser.IE) {
window.execScript(scriptContent);
} else if (Prototype.Browser.WebKit) {
window.setTimeout(scriptContent, 0);
} else {
window.eval(scriptContent);
}
} catch (e) {
if (DEBUG) {
alert(e.message);
}
}
scripts = null;
},
onFailure: function(response) {
alert("failed to load one or more files, please refresh the page.");
}
});
});
}Event.observe(document, "dom:loaded", loadJS);

Answer 16

具说有人这样提高页面速度,楼主试试<html>
......
</html>
<script src=xxxx></script>把js文件放在html标签后面

Answer 17

试参考一下：
<script type="text/javascript">
function loadScript (url, callback) {
var script = document.createElement('script');
script.type = 'text/javascript';if (callback)
script.onload = script.onreadystatechange = function() {
if (script.readyState && script.readyState != 'loaded' && script.readyState != 'complete')
return;
script.onreadystatechange = script.onload = null;
callback();
};
script.src = url;
document.getElementsByTagName('head')[0].appendChild (script);
}
</script>

Answer 18

楼主window.onload = function()
{
    loadScript("http://api.51ditu.com/js/maps.js");
    loadScript("http://api.51ditu.com/js/ezer.js");
    map_show(11753613,3485354,4,"可");
}
这样加载不应该会报错啊，这是同步加载的啊。
个人认为可以这样处理，jquery有个跨域的$.getScript处理，load完之后在回调函数里执行你的map_show
还有个判断js是否加载完的函数
        function loadScript(url, callback){
            var el = document.createElement("script");
            el.src = url;
            el.type = "text/javascript";
            el.language = "javascript";
            document.getElementsByTagName("head")[0].appendChild(el);
            el.onreadystatechange = function () {
                if (el.readyState == 'complete' || el.readyState == 'loaded' || el.readyState == 'interactive') {
                    callback();
                }   
            }   
            el.onload = function () {
                callback();
            }   
        }   

Answer 19

LeesAjaxRequest.js:
支持跨域的Ajax异步(请求)提交类 
http://www.cnblogs.com/xhzxlqt/archive/2009/02/01/1382142.html
使用示例1.//动态装载JS文件,可以在任意时候进行JS文件的加载
(一个页面中的片段,vJS为js文件请求路径):
if(vJS && vJS.length>3)
{   
    if(!_this.loadedJS.isInArray(vJS))//检查该JS文件是否已经被加载过
    {
        _this.loadedJS[_this.loadedJS.length]=vJS;
        LeesAjaxRequest.Get({
                                url:vJS,
                                success:function(ojs){
                                            var jsOBJ=document.createElement("script");                                                                                        
                                            jsOBJ.text=ojs.responseText;                                                                                        
                                            document.documentElement.appendChild(jsOBJ);
                                        },//end success
                                        headers:{Content_Type:"application/x-javascript"}
                        });//end Get
    }//end if ( !_this.loadedJS.isInArray(vJS))             
}//end if(vJS && vJS.length>3)//======================================================
对你的需求:
//ie browser
        if (vBrowser.isIE) {
            document.onreadystatechange = function() {
                if (document.readyState=="complete") {
                    doInit();
                }
            }
        //firefox browser
        }else {
            document.addEventListener("DOMContentLoaded", doInit, false);
        }
        
        function doInit()
        {
            //页面元素已经加载完毕,接下来想干什么呢?
            //Do it here!
        }//==============================

Answer 20

这是我一开始选择的方法，在FF下没问题，但是在IE和Webkit类浏览器下如果JS文件多了之后，还是会出错。推测原因大概是把script标签加到页面中的时候也需要一小段时间，如果后加载的文件短小而先加载的文件长的话，实际加载的顺序与期待的顺序会不一致。
这类问题归结起来还是个顺序的问题，所以你看到我在上面我自己的方法中是把所有脚本内容按顺序拼成一个长字符串，再用eval或者execScript来加载，这样才完全保证了顺序正确，除此之外真没找到什么好方法。