文件load事件:imgiframe

Posted ypm_wbg

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了文件load事件:imgiframe相关的知识,希望对你有一定的参考价值。

iframe的 load 事件

在所有为IFRAME动态添加onload监听事件的方法中,只有 使用事件监听方式为 IFRAME 的 onload 事件绑定处理函数,IE6、7、8才有效。所以为 IFRAME 添加load事件完美方案如下:

// 事件监听兼容方案
function addEvent(elem,event,fn){
    if (elem.attachEvent) {
        elem.attachEvent(‘on‘+event,fn)
    } else {
        elem.addEventListener(event,fn,false)
    }
}	

window.onload = function(){
	var iframeA = document.createElement(‘iframe‘);
	iframeA.src = ‘http://www.baidu.com‘
	addEvent(iframeA,‘load‘,function(){
		document.body.bgColor = ‘#000‘; // 回调函数
	});
	document.body.appendChild(iframeA);
}
		

优化页面建议不要嵌套iframe,但是在内部项目还是很常见。其实在IE中,监控iframe加载完毕还可以采取监听 onreadystatechange 事件。

 

IMG的 load 事件

img的load事件,我们使用 new Image()。这里我们得注意 complete 事件。研究网上的得出以下代码:

var img = new Image(); 
img.src= "http://i1.hoopchina.com.cn/user/627/17191627/17191627_big_3.jpg";
if (img.complete || img.width) {
	alert("该图片已经在缓存中,不需要再下载")
	alert(img.height)
} else {
	img.onload = function() {
		alert("图片加载完成");
		alert(img.height)	
	}
}
		

以上是关于文件load事件:imgiframe的主要内容,如果未能解决你的问题,请参考以下文章

事件DOMContentLoaded和load的区别

事件DOMContentLoaded和load的区别

jq load()方法中加载文件中元素事件绑定失效的问题

jQuery.load()事件使用方法详解

jQuery 的ready事件和 JavaScript 的load事件对比

document DOMContentloaded和document load