您的位置：首页 > Web前端 > CSS

onload实现判断iframe/img/body/script/css加载完成的完美方法

2011-03-01 19:56 811 查看
1.背景分析：

以前在开发一个页面loading插件的时候,写了两个参数，一个是loadInto,一个是delete，第一个loadInto是往页面里边添加相关的页面元素，第二个delete是删除掉添加的页面元素，就是使用在页面加载或者是grid加载完成之后，但是由于我们的开发框架是基于lifeRay，在页面主操作区一个iframe,并且存在不同域的问题，所以很难执行这个delete的方法。

2.原理分析：

今天也是看到一篇用onload可以返回“SomeJavaScriptCode”的语法，实现iframe/img/body/script/css加载完成的完美方法，这正好解决了我以前遇到的问题，延伸一下可以使用这个方法定义页面某个特定元素加载完后执行特殊的代码，于是使用这个方法对原来的插件进行优化。

onload语法：

onload="SomeJavaScriptCode"


参数描述
SomeJavaScriptCode必需。规定该事件发生时执行的 JavaScript。
支持该事件的 HTML 标签：

<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

支持该事件的 JavaScript 对象：

image, layer, window

还用到了attachEvent方法：

用attachEvent()/addEventListener()方法添加触发事件

[/code]
3.代码编写：

js代码：

(function($) {
$.loading = {
show : function() {
var wrap=$(document.body);
$("<div class=/"loading-mask/" style='z-index:9998; background:#000; position:absolute; top:0px; left:0px;'></div>").css({display:"block",width:wrap.width(),height:wrap.height(),opacity:'0.6'}).appendTo(wrap).stop().fadeTo(650, 0.8);
$("<div class=/"loading-mask-msg/" style='z-index:9999; width:300px; height:200px; position:absolute;'><img style='float:left; width:60px;' src="loading.gif" mce_src="loading.gif" alt='loading...' /><div class=/"loading-mask-text/" style='color:#b2b2b2; text-align:center; float:left; width:200px; height:60px; line-height:60px;'></div><div style="/" mce_style="/""clear:both;/"></div><iframe style="display:none" mce_style="display:none"/></div>").appendTo(wrap).css({display:"block",left:(wrap.width()-$("div.loading-mask-msg",wrap).outerWidth())/2,top:(wrap.height()-$("div.loading-mask-msg",wrap).outerHeight())/2,opacity:'0.6'}).stop().fadeTo(650, 1);
$("div.loading-mask-text").html($.loading.defaults.defaultMsg);
},
close:function() {
var wrap=$(document.body);
wrap.find("div.loading-mask-msg").remove();
wrap.find("div.loading-mask").remove();
},
fadeOut:function(){
var wrap=$(document.body);
wrap.find("div.loading-mask-msg").fadeOut(1000,function(){
wrap.find("div.loading-mask-msg").remove();
});
wrap.find("div.loading-mask").fadeOut(1000,function(){
wrap.find("div.loading-mask").remove();
});
}
};
$.loading.defaults = {
defaultMsg : "正在加载，请稍候……"
}
})(jQuery);
$(document).ready(function(){
$.loading.show();
});
var iframe = document.getElementById("iframenews");
if (iframe.attachEvent){
iframe.attachEvent("onload", function(){
$.loading.fadeOut();
});
} else {
iframe.onload = function(){
$.loading.fadeOut();
};
}
</script>
[/code]
html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>loading效果</title>
<mce:script src="js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js" language="javascript"></mce:script>
</head>
<body>
<iframe id="iframenews" src="http://www.qq.com" mce_src="http://www.qq.com" name="bionews" width="800" marginwidth="0" height="700" marginheight="0" align="top" scrolling="no" frameborder="0"></iframe>
</body>
</html>


这样可以实现对我插件的优化了就可以！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航