文件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)
}
}
文件load事件:img、iframe的更多相关文章
- jQuery中ready与load事件
jQuery中ready与load事件(来自慕课网) jQuery有3种针对文档加载的方法 $(document).ready(function() { // ...代码... }) //docume ...
- jQuery学习一:jQuery中的ready和load事件
//ready事件 $(document).ready(function(){ 代码........ }); //ready事件简写: $(function(){ 代码........ }); //l ...
- jQuery 的ready事件和 JavaScript 的load事件对比
为了理解2个事件的异同,先了解一下HTML文档加载顺序 HTML DOM文档加载步骤 HTML DOM文档加载是按顺序执行的,这与浏览器的渲染方式有关,一般浏览器渲染操作的顺序大致按如下几个步骤 1, ...
- jQuery中ready与load事件的区别
1.摘要 大家在编程中使用jQuery还有JS的时候一定会在使用之前这样: //document ready $(document).ready(function(){ ...code... }) / ...
- jquery load ($.load) 事件用法与分析(转)
首先我们需要清楚的是jquery load方法是对jQuery.ajax()进行封装以方便我们使用的一个方法,当我们需要处理较为复杂的逻辑时候,还是需要用到jQuery.ajax()这个比较全面的方法 ...
- 原 jQuery中document的ready和load事件的区别?
概述: 大家在工作中用jQuery的时候一定会在使用之前这样: 1 2 3 4 5 6 7 8 //document ready $(document).ready(function(){ ...
- (转载) 上传文件进度事件,进度事件(Progress Events)
转载URL:https://www.w3cmm.com/ajax/progress-events.html MDN参考:https://developer.mozilla.org/zh-CN/docs ...
- jQuery的ready与js的load事件的区别
摘自:http://www.cnblogs.com/see7di/archive/2011/07/15/2239677.html 为了理解这两个事件的异同,读者应该先了解HTML文档加载的顺序. DO ...
- firefox-5.x关于img标签的load事件、svg、ff5.4audio标签显示的适配tip
1.firefox中img标签的load事件后获取图片宽高错误. 需求是根据图片加载后的大小宽高比,调整图片显示的宽高. 在chrome浏览器下,使用jquery的load方法监听img标签的&quo ...
随机推荐
- Using Bluetooth LE with Go (Golang)
Using Bluetooth LE with Go (Golang) Gatt is a Go package, which provides developers to create BLE a ...
- PAT 1039 Course List for Student[难]
1039 Course List for Student (25 分) Zhejiang University has 40000 students and provides 2500 courses ...
- 09 grep、正则表达式和sed
作业一:整理正则表达式博客 ^ 行首$ 行尾. 除了换行符以外的任意单个字符* 前导字符的零个或多个.* 所有字符[] 字符组内的任一字符[^] 对字符组内的每个字符取反(不匹配字符组内的每个字符)^ ...
- mac 安装Sequel Pro
安装命令如下 Install the App Press Command+Space and type Terminal and press enter/return key. Run in Term ...
- HDU 2191 珍惜现在,感恩生活(多重背包模板题)
多重背包模板题 #include<iostream> #include<cstring> #include<algorithm> using namespace s ...
- XDU 1032
#include<cstdio> typedef long long ll; ; ll feima(ll a,ll b) { ll c=; while(b) { ) c=c*a%mod; ...
- 【android】开发笔记---存储篇
SQLite批量插入数据 当我们执行 db.execSQL("sql语句")的时候,系统进行了一次IO操作,当批量插入成千上万条时,就会消耗掉许多资源. 解决之道是通过事务,统一提 ...
- .NET Core + EF 报nuget包不兼容
错误信息如下: 严重性 代码 说明 项目 文件 行 禁止显示状态错误 NU1107 Microsoft.EntityFrameworkCore 中检测到版本冲突.直接安装/引用 Microsoft.E ...
- window连接linux共享
前提说明:windows主机信息:192.168.1.100 帐号:abc 密码:123 共享文件夹:sharelinux主机信息:192.168.1.200 帐号:def 密码:456 共享文件夹: ...
- RabbitMQ学习之(一)_初步了解RabbitMQ、RabbitMQ的使用流程、为什么要使用RabbitMQ、RabbitMQ的应用场景
初识RabbitMQ RabbitMQ是一个在AMQP协议基础上实现的消息队列系统, 是一个消息代理.它的核心原理非常简单:接收和发送消息.你可以把它想像成一个邮局:你把信件放入邮箱,邮递员就会把信件 ...