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

最新推荐文章于 2021-05-31 10:45:03 发布

lixp3

最新推荐文章于 2021-05-31 10:45:03 发布

阅读量4.2k

点赞数

分类专栏： javascript 文章标签： function javascript iframe delete html class

本文链接：https://blog.csdn.net/lxp1021/article/details/6216380

版权

javascript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

1.背景分析：

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

2.原理分析：

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

onload语法：

οnlοad="SomeJavaScriptCode"

参数	描述
SomeJavaScriptCode	必需。规定该事件发生时执行的 JavaScript。

支持该事件的 HTML 标签：

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

支持该事件的 JavaScript 对象：

image, layer, window

还用到了attachEvent方法：

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

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>

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>

这样可以实现对我插件的优化了就可以！

lixp3

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
3
评论
onload实现判断iframe/img/body/script/css加载完成的完美方法

1.背景分析：以前在开发一个页面loading插件的时候,写了两个参数，一个是loadInto,一个是delete，第一个loadInto是往页面里边添加相关的页面元素，第二个delete是删除掉添加的页面元素，就是使用在页面加载或者是grid加载完成之后，但是由于我们的开发框架是基于lifeRay，在页面主操作区一个iframe,并且存在不同域的问题，所以很难执行这个delete的方法。2.原理分析：今天也是看到一篇用onload可以返回“SomeJavaScriptCode”的语法，实现iframe/i
复制链接

扫一扫