文件load事件:img、iframe

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)
	}
}
		
时间: 2024-10-07 22:15:22

文件load事件:img、iframe的相关文章

js文件最后加载(在window.load事件发生后再加载js文件),用于解决因jQuery等js库导致网页加载慢的问题

需引入文件:lazyload-min.js <script src="JS/lazyload-min.js" type="text/javascript"></script> 插入代码: function loadscript() { LazyLoad.loadOnce([ 'JS/touch.js', 'http://libs.baidu.com/jquery/1.2.3/jquery.min.js' ], loadComplete); }

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

jQuery.load()是ajax中一种异步加载的事件,我们可以加载整个页面并且也可以带参数加载,下面我来详细介绍jQuery.load()事件用法,希望对初学者有所帮助. .load( url, [ data ], [ complete(responseText, textStatus, XMLHttpRequest) ] ) 返回: jQuery 描述: 载入远程 HTML 文件代码并插入至 DOM 中.version added: 1.0.load( url, [ data ], [ c

jQuery的ready与js的load事件的区别

摘自:http://www.cnblogs.com/see7di/archive/2011/07/15/2239677.html 为了理解这两个事件的异同,读者应该先了解HTML文档加载的顺序. DOM文档加载是按顺序执行的,这与浏览器的渲染方式有关系.一般浏览器渲染操作的顺序大致按如下几个步骤来完成.(1) 解析HTML结构.(2) 加载外部脚本和样式表文件.(3) 解析并执行脚本代码.(4) 构造HTML DOM模型.(5) 加载图片等外部文件.(6) 页面加载完毕. 具体说明如下.1. 执

jQuery中ready与load事件的区别

目录: 1ready与load谁先执行 2DOM文档加载的步骤 3ready事件 4load事件 5总结 概述: 大家在工作中用jQuery的时候一定会在使用之前这样: 1 2 3 4 5 6 7 8 //document ready $(document).ready(function(){     ...code... }) //document ready 简写 $(function(){     ...code... }) 有些时候也会这么写: 1 2 3 4 //document lo

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

为了理解2个事件的异同,先了解一下HTML文档加载顺序 HTML DOM文档加载步骤 HTML DOM文档加载是按顺序执行的,这与浏览器的渲染方式有关,一般浏览器渲染操作的顺序大致按如下几个步骤 1, 解析HTML结构 2,加载外部脚本和样式表文件 3,解析并执行脚本代码 4,构造HTML DOM模型 5,加载图片等外部文件 6,页面加载完毕 执行时机 load 事件必须等到页面中所有内容全部加载完毕之后,才被执行,如果一个页面中包含了大数据的多媒体文件,则就会出现页面文档已经呈现出来,二由于网

jQuery中ready与load事件

jQuery有3种针对文档加载的方法 $(document).ready(function() { // ...代码... }) //document ready 简写 $(function() { // ...代码... }) $(document).load(function() { // ...代码... }) 一个是ready一个是load,这两个到底有什么区别呢? ready与load谁先执行:大家在面试的过程中,经常会被问到一个问题:ready与load那一个先执行,那一个后执行?答

关于jQuery的load事件

这两天一直在纠结一件事情.jQuery的load事件,不能加载js只能加载html后来查了下要用$getscript方法,说是load方法把js过滤了.我在外面写了js再引入进去结果还是不行,本来我是自己文件夹里有jquery的js,引用了自己下载的,然后在html文件夹里面又引用了百度在线cdn2.0版本的js,我把百度的CDN链接删掉了结果竟然奏效了,在FF里面完美运行. 记一下,浪费我两天时间一直耗在这上面,初学者真是删不起...

原 jQuery中document的ready和load事件的区别?

概述: 大家在工作中用jQuery的时候一定会在使用之前这样: 1 2 3 4 5 6 7 8 //document ready $(document).ready(function(){     ...code... }) //document ready 简写 $(function(){     ...code... }) 有些时候也会这么写: 1 2 3 4 //document load $(document).load(function(){     ...code... }) 一个是

doment ready事件和load事件的区别及实现

从2017年9月至今工作中大部分使用react,前端渲染的一些基础性知识记忆不是很深刻了.面试**公司的时候,碰到"document ready和load的区别,以及document ready事件的实现"的笔试题,区别倒是回答出来了,ready事件只回答了readystatechange事件.回答的不是很全面,特在此记录. document ready: 当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表.图像和子框架的加