文件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 ...
随机推荐
- 缓存系统MemCached的Java客户端优化历程
Memcached 是什么? Memcached是一种集中式Cache,支持分布式横向扩展.这里需要解释说明一下,很多开发者觉得Memcached是一种分布式缓存系统,但是其实Memcached服务端 ...
- Linux下修改.bash_profile 文件改变PATH变量的值
Linux中含有两个重要的文件 /etc/profile和$HOME/.bash_profile 每当系统登陆时都要读取这两个文件,用来初始化系统所用到的变量,其中/etc/profile是超级用户所 ...
- 跟我学Makefile(一)
1.首先,把源文件编译生成中间代码文件,Windows下.obj文件,unix下.o文件,即Object File.这个动作叫编译(compile) 把大量的Object File合并执行文件,叫做链 ...
- quick-cocos2d-x + Lua 开发
quick-cocos2d-x + Lua 开发 quick-cocos2d-x + Lua 开发 首页在Eclipse中搭建quick-cocos2d-x的lua开发环境. 1. 首先需要 ...
- Java基础知识陷阱(四)
本文发表于本人博客. 今天我们来说说关于java继承以及反射有关的问题,大家先看下下面代码,试问可以编译通过不,为什么具体说说原因? public class Test{ public static ...
- oracle 数据库误删数据,误删表的恢复
1.某表的数据误删了,那么可以查询这个表某一时间节点之前的数据,并放到一个新建的表里. create table temptable as select * from t_billdefi as O ...
- 跨域问题-jsonp
前端同源策略并不会拦截静态资源请求,那么就将接口伪装成资源,然后后端配合返回一个前端预定义的方法调用,将返回值放入调用该函数的形参即可 <!DOCTYPE html> <html l ...
- vue指令与组件
参考http://blog.csdn.net/lioldamon/article/details/74058222?utm_source=itdadao&utm_medium=referral ...
- iOS 总结APP间跳转的常用以及非常用需求 APP跳转Safari APP跳转APP
需求驱动技术,有了新的需求,旧技术无法实现时,就会有新的技术出现. 一般的APP跳转需求有以下几种: 1. 从自己的APP跳转到别人的APP. 2. 从自己的APP跳转系统APP. 3. 让别人的A ...
- Druid学习之路 (一)Druid初识
作者:Syn良子 出处:https://www.cnblogs.com/cssdongl/p/9588079.html 转载请注明出处 最近在学习和使用Druid.觉得一些章节有必要按照自己的理解翻译 ...