script异步加载 加载失败 后续script异步加载节点会加载么

$("#tishi").fancybox({
'titlePosition'
: 'inline',
'overlayColor'
'overlayOpacity'
,弹出框:HTML code
&!--信息提示--&
&div id="tishi" style="z-index:2000;position:display:none"&
&table width="500" border="1" align="center" cellpadding="0" cellspacing="1" bordercolor="#990000"&
&td bgcolor="red"&&table width="500" border="0" cellspacing="20" cellpadding="0"&
&td align="left" valign="top"&&table width="460" border="0" cellspacing="0" cellpadding="0"&
&td width="179" height="30" class="unnamed1"&&span class="STYLE2" style="color:#fff"&提示:&/span&&/td&
&td width="91" align="right"&&&/td&
&td align="right"&&a href="javascript:void(0);" onclick="$('#tishi').hide();" style="font-size:12color:#fff"&关闭&/a&&/td&
&td colspan="3" class="zhengwen" id="tishi_content" align="center" style="font-size:16color:#fff"&&/td&
&td&&&/td&
&td width="91"&&&/td&
&td&&&/td&
&td&&&/td&
&td height="27" align="center" valign="middle" background="__PUBLIC__/images/denglu_07.gif" class="zhengwen STYLE1"&&a href="javascript:void(0);" onclick="$('#tishi').hide();" style="color:#text-decoration:none"&知道了&/a&&/td&
&td width="190"&&&/td&
&/table&&/td&
&input type="hidden" value="{$has_loin_name}" id="has_loin_name"&
&/table&&/td&
&!--信息提示--&
当点击后,弹出The requested content cannot be loaded.Please try again later.提示,是不是参数调用的不对?------解决方案--------------------
是fancybox.js中的错误提示?楼主搜下 fancybox.js 中 的错误提示 The requested content cannot 在哪?
如何让Script的ID延迟3秒后再执行效果?能实现吗
怎么让Script的ID延迟3秒后再执行效果?能实现吗?怎么让下面的ID:capslide_img_ cont1,capslide_img_ cont2,延迟3秒后再执行?下面的JS代码,希望有热心网友回答。。。因为急用。。。
这是一个鼠标放上去的效果,因为鼠标一路过,就会有闪动,所以想让它延迟,这样就不会太花哨了。。。附上链接了: /dins/le.html
就是像让鼠标路过时,不要谎动,放鼠标放上3秒后,才往上滑。。。前提是保持好原有的效果,能实现吗?------解决方案--------------------
改了下jsJScript code
function Pause(obj,iMinSecond){
if (window.eventList==null) window.eventList=new Array();
var ind=-1;
for (var i=0;i&window.eventList.i++){
if (window.eventList[i]==null) {
window.eventList[i]=
if (ind==-1){
ind=window.eventList.
window.eventList[ind]=
setTimeout("GoOn(" + ind + ")",iMinSecond);
//js继续函数
function GoOn(ind){
var obj=window.eventList[ind];
window.eventList[ind]=
if (obj.NextStep) obj.NextStep();
else obj();
(function($) {
$.fn.capslide = function(options) {
var opts = $.extend({}, $.fn.capslide.defaults, options);
return this.each(function() {
$this = $(this);
var o = $.meta ? $.extend({}, opts, $this.data()) :
if(!o.showcaption)
$this.find('.ic_caption').css('display','none');
else $this.find('.ic_text').css('display','none');
var _img = $this.find('img:first');
var w = _img.css('width');
var h = _img.css('height');
$('.ic_caption',$this).css({'color':o.caption_color,'background-color':o.caption_bgcolor,'bottom':'0px','width':w});
$('.overlay',$this).css('background-color',o.overlay_bgcolor);
$this.css({'width':w , 'height':h, 'border':o.border});
$this.hover(
function () {
Pause(this,3000);//停留3秒后执行NextStep的function
this.NextStep=function(){
if((navigator.appVersion).indexOf('MSIE 7.0') & 0)
$('.overlay',$(this)).show();
$('.overlay',$(this)).fadeIn();
if(!o.showcaption)
$(this).find('.ic_caption').slideDown(500);
$('.ic_text',$(this)).slideDown(500);
function () {
Pause(this,1000);//停留3秒后执行NextStep的function
this.NextStep=function(){
if((navigator.appVersion).indexOf('MSIE 7.0') & 0)
$('.overlay',$(this)).hide();
$('.overlay',$(this)).fadeOut();
if(!o.showcaption)
$(this).find('.ic_caption').slideUp(200);
$('.ic_text',$(this)).slideUp(200);
$.fn.capslide.defaults = {
caption_color
: 'black',
caption_bgcolor
: '#ECECEC',
overlay_bgcolor : '#ECECEC',
showcaption
})(jQuery);
$(function () {
$("#capslide_img_cont1").capslide({
caption_color
: 'black',
caption_bgcolor
: '#ECECEC',
overlay_bgcolor : '#ECECEC',
showcaption
$("#capslide_img_cont2").capslide({
caption_color
: 'black',
caption_bgcolor
: '#ECECEC',
overlay_bgcolor : '#ECECEC',
showcaption
如果您想提高自己的技术水平,欢迎加入本站官方1号QQ群:&&,&&2号QQ群:,在群里结识技术精英和交流技术^_^
本站联系邮箱:您当前的位置:&&&&
动态加载JS
编辑:蓝风紫电游戏攻略游戏特色
研发:Rockstar North
厂商:Rockstar Games
状态:商业化
收费:购买光碟
经营许可证:苏ICP备号,QQ:1104747 、5633249ie6&7&8&页面加载方式&以及解决加载办法
在IE8、Firefox3.6之前页面加载外部的javascript文件(IE6和IE7会连同图片,样式资源和页面渲染一同阻塞)是阻塞式的,而在之后的版本中,浏览器都使用了瀑布式加载,这样页面的打开及渲染速度都会变快,请注意,我提到的瀑布式加载,仅仅指的是加载,而非JS的执行,在主流浏览器中JS的执行总是阻塞的。用简单一点的语言描述,就是同一时间,页面只会加载一个js文件。在第一个js文件加载并执行完之前,第二个要引入的js不会下载和执行。而页面中js的引入顺序以请求的顺序为定。
我们来看一个在下,页面加载多个js文件的例子:
inline script block:为页面内嵌js代码块,而external
script则是需要从外部加载进来的js文件。
我们设定inline script执行用时3秒,external script1加载用时2秒,执行用时3秒,external
script2加载用时2秒,执行用0秒(实际上会稍大于0,下同),external script3加载用2秒,执行用时0秒。
由上图,可知页面需要15641毫秒才能将js加载并执行完。我们可以得到一个公式:
而同样的页面,在和3.6下,我们会得到:
IE8: (只需要9秒,速度快了近一倍)
由以上的现象,可以证实上面的观点。
那么是否有一个方案可以让IE6/或是展示我们的页面更快一点,可以同时加载多个文件,并且不影响页面中DOM元素的渲染?答案是肯定的。
在之前的项目中,我曾经写过类似的代码,来处理请求多个外部javascript文件。
loadScript(url, fn, doc, charset){
doc = doc ||
var script =
doc.createElement_x_x('script');
script.language =
"javascript";
script.charset =
charset?charset:’utf-8’;
script.type =
'text/javascript';
script.onload =
script.onreadystatechange = function(){
(!script.readyState || 'loaded' === script.readyState || 'complete'
=== script.readyState) {
script.onload =
script.onreadystatechange =
script.parentNode.removeChild(script);
script.src =
$('head')[0].a(script);
那个当网页中需要动态调用多个js文件时,我们可以这样写:
loadScript('../jquery-1.4.2.js',function(){console.log('jquery-1.4.2.js
loaded')});
loadScript('$.wbx.js',function(){console.log('example/$.wbx.js
loaded')});
loadScript('gadgets.js',function(){console.log('example/gadgets.js
loaded')});
loadScript('jui-all.js',function(){console.log('example/jui-all.js
loaded')});
上段代码处理这样的功能:可以动态加载多个js文件,当文件下载完成后可以执行回调函数。当然它的好外不止于此,我们还可以按需获取,减少流量和浏览器内存占用!对于高并发请求的网站,有着天大的好处!我以前在的一家公司做过统计首页减少50k的流量,一年就可以节省十几万的成本呀。。。但上面的代码也不是完美的,在一些应用下会出现新的问题。请看下面的截图
不难发现,加载的顺序变了!这时,如果a.js依赖于b.js,而b.js偏偏又迟于a.js加载完成时,就会出现“变量未定义”的js错误,无法执行下去。
那我们的下一个目标就是如何让这些外部文件有序的加载进网页。这样无论智商高的还是低的,都会想到 队列
,不错,就是队列。在JS里实现队列并不难办,是的,数组就行,我们可以用数组的shift方法,弹出数组的第一个JS文件(这也是我们最先加入数组的那个JS文件),模拟了队列的实现方法。不过,在这里我们还要多考虑一个问题:必须要上一个js文件加载完成后,下一个JS的请求才能开始。我们怎么判断上一个JS文件已经加载完成了呢?上代码:
var testNode =
doc.createElement_x_x('script'), fn,
testNode.readyState ? function(node, callback){
node.onreadystatechange = function(){
node.readyS
if (rs === 'loaded'
|| rs === 'complete') {
// handle memory
leak in IE
node.onreadystatechange =
callback.call(this);
}: function(node,
callback){
node.onload =
在非的情况下我们可以很方便的用dom元素的onload和onerror来判断元素是否已经加载完成,而IE不吃这套,它并不支持script节点的onload判断,所以我们只好寻求其它的解决方案。还好,IE对onreadystatechange和readyState的支持足以让我们完成这个任务。
readyState 的值& 可能为 以下几个 :
“uninitialized” & 原始状态
“loading” & 下载数据中..
“loaded” & 下载完成
“interactive” & 还未执行完毕.
“complete” & 脚本执行完毕.
在IE6/IE7/IE8下,虽然script节点加载完成,但结果并不总是loaded或是complete,并且先设置src再append到节点树和先append到节点树再设定src,IE7/IE8处理加载src文件的时间是不同的。为了减少不必要的麻烦,我们这里就两个状态都判断了。
接下来还有一个问题,如果其中某个js文件,需要去处理dom节点,而我们在加载js时并不能确定这个节点是否已经渲染完成,既我们的Js加载需要在所有的dom节点渲染完成后才开始加载执行,这时我们就要用到经典的domReady判断。
domReady(){
if (readyBound)
readyBound =
(document.readyState === "complete") {
dequeue();
(document.addEventListener) {
document.addEventListener("DOMContentLoaded", dequeue, false);
window.addEventListener("load", dequeue, false);
(document.attachEvent) {
document.attachEvent("onreadystatechange", dequeue);
window.attachEvent("onload", dequeue);
var toplevel =
toplevel =
window.frameElement ==
catch (e) {
(document.documentElement.doScroll
&& toplevel) {
// If IE is used,
use the trick by Diego Perini
/IEContentLoaded/
document.documentElement.doScroll("left");
catch (error) {
setTimeout(arguments.callee, 10);
dequeue();
早期的做法是用window.onload或是defer,defer并不是所有的浏览器都支持,可以排除。window.onload事件是待到页面上的所有资源被加载才激活,如果页面上有许多图片或音乐,而我们要操作的元素在的它们的下方呢?因此,W3C搞了DOMContentLoaded与addEventListener,只是可惜IE又不支持。还好,我们又找到readystatechange。知道页面的内容加载完成,我们再用到Diego
Perini提供的doScroll来判断document节点是否渲染到页面。这样我们就能够让js在页面渲染完成后再执行了。至些我们就实现了以下的功能:
异步加载,加快了页面的加载时间,同时能够按需加载,节省流量
有序加载,解决js依赖问题
延时执行,在页面渲染完成后再执行js,防止undefined情况
浏览器如何响应一个按钮的 版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
文章引用地址:http://www.iefans.net/js-qingqiu-zhixing-jizhi/ 作者:iefans
以上网友发言只代表其个人观点,不代表新浪网的观点或立场。为什么添加的节点胡显示在&script&&/script&节点后面?在第一个&span&节点加上&br/&换行之后会重叠!
求解求解求解
写下你的评论...
Copyright (C)
All Rights Reserved | 京ICP备 号-2

我要回帖

更多关于 script延迟加载 的文章

 

随机推荐