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

最新推荐文章于 2022-06-15 16:47:40 发布

原创最新推荐文章于 2022-06-15 16:47:40 发布 · 4.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#function #javascript #iframe #delete #html #class

javascript 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了一种优化页面加载插件的方法，通过利用onload事件确保加载完成后移除加载提示，解决跨域环境下删除元素的问题。

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()方法添加触发事件

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>

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