日期:2014-05-16  浏览次数:20397 次

求教一个异步加载js的问题
<div id="videoDiv"  style="z-index:-1;display:none;border:1px solid  #a8a8a8;position:absolute;top:50px;left:50px;width:425px;height:425px;">
<div id="videoDrag" onmousedown="initVideoDrag(this)" style="height:25px;line-height:25px;background-color:#76899B;cursor:move;font-size:12px;" >&nbsp;&nbsp;<strong  style="color:#fff;">视频窗口</strong></div>
<div style="z-index:1002;position:absolute;top:0px;padding:0px 0px;right:0px;height:23px;line-height:23px;background-color:#76899B;font-size:12px;"><span title="关闭" onclick="closeWin();" style="width:12px;border:0px;color:#fff;font-family:webdings;cursor:hand;">r</span>&nbsp;&nbsp;</div>
<div id="video" style="display:none;border:0px solid blue;">
<script type="text/javascript" src="http://ip:9000/xx.js"></script>   
</div>
 </div>  

这个是我接手的这个工程前台加载的一个远程掉用视频的js,现在问题是如果我在页面中将这一段代码注释掉,加载速度大概能提高4到5秒。领导要求我将这段js的调用改成看视频的时候再加载,我试了很多方法貌似都不行,一改成调用时再加载就看不了视频了,不知道各位大大有没有遇到过类似的问题,帮忙指点一下
异步加载js js加载 延迟加载js

------解决方案--------------------
动态加载js?
<script> 

    var oHead = document.getElementsByTagName('HEAD').item(0); 

    var oScript= document.createElement("script"); 

    oScript.type = "text/javascript"; 

    oScript.src="http://ip:9000/xx.js"; 

    oHead.appendChild( oScript); 

</script> 
后者这样
<script src='' id="s1"></script> 

<script language="javascript"> 

    s1.src="http://ip:9000/xx.js" 

</script> 
是不是xx.js中有什么逻辑问题,比如页面加载才运行的脚本?
------解决方案--------------------
看你JS放的位置感觉,
http://ip:9000/xx.js里面一般都是都有的document.write
如果有document.write的 动态加载js 方法就有问题了
用独立Iframe,通过控件Iframe.src 是否加载
------解决方案--------------------
应该是http://ip:9000/xx.js这个js文件的问题,内部可能使用了页面加载事件进行一些对视频操作。
动态加载进来,无法触及这些事件。
------解决方案--------------------
$.ajax加载视频后,在success方法中加载js试试
------解决方案--------------------
引用:
看你JS放的位置感觉,
http://ip:9000/xx.js里面一般都是都有的document.write
如果有document.write的 动态加载js 方法就有问题了
用独立Iframe,通过控件Iframe.src 是否加载


#2给出方案了,通过iframe来加载。

做一个独立的视频页面放置你那些代码,window onload后再动态生成iframe加载视频页面