文件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 ...
随机推荐
- python插入记录后获取最后一条数据的id
python插入记录后取得主键id的方法(cursor.lastrowid和conn.insert_id()) 参考:https://blog.csdn.net/qq_37788558/article ...
- java 多线程 day07 多线程共享数据
/** * Created by chengtao on 17/12/3. * 多个线程 如何共享数据? * 常见实例:多个窗口同时售卖火车票 */public class Thread0701_Mu ...
- python学习笔记(十三)接口开发
一.开发接口的作用 1.mock接口,模拟一些接口,在别的接口没有开发好的时候,需要开发一些模拟接口进行调试和测试. 2.查看数据,比如,获取所有学员信息的接口,就不需要提供数据库的查看信息. 二.接 ...
- MapReduce Unit Test
以前用java写MR程序总不习惯写单元测试,就是查错也只是在小规模数据上跑一下程序.昨天工作时,遇到一个bug,查了好久也查出来.估计是业务逻辑上的错误.后来没办法,只好写了个单元测试,一步步跟踪,瞬 ...
- 使用stringstream格式化字符串
stringstream所在头文件为<sstream> 一般有如下常用功能: 1.安全格式化字符串 stringstream常用来安全的格式化若干个字符串,数值到一个缓冲区, 而不用担心溢 ...
- 001-搭建spring boot项目
1.第一步.file--new--project. 2.spring initializr--project sdk--default--next 3. 4.spring boot--选择依赖项--n ...
- iOS 关于BTC 一些知识点
1.BTC 用这个网 可以校验 自己的库生成的助记词 地址 是否是合法正常的 https://iancoleman.io/bip39/ 2.知晓 BTC 钱包是否有钱 和交易记录 https://te ...
- Hadoop集群的各部分常用端口
hadoop集群的各部分一般都会使用到多个端口,有些是daemon之间进行交互之用,有些是用于RPC访问以及HTTP访问.而随着hadoop周边组件的增多,完全记不住哪个端口对应哪个应用,特收集记录如 ...
- 在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示
在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示) 1.使用npm安装依赖 npm install --save codemirror; 2.在页面中放入如下代码 ...
- sqoop命令,mysql导入到hdfs、hbase、hive
1.测试MySQL连接 bin/sqoop list-databases --connect jdbc:mysql://192.168.1.187:3306/trade_dev --username ...