window onload 与 img onload事件

通常，window.onload就是载入完dom之后运行的。

而img就是载入完图片完运行它的onload事件。依据img的src是否载入完毕。

因此。看以下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>window onload与img onload</title>

<script type='text/javascript'>

window.onload = function(){

	var img = document.getElementById('img1');

	//var src = img.getAttribute('src');

	//img.setAttribute('src','');

	img.onload = function(){

		alert(1);

	};

	//img.setAttribute('src',src);

};

</script>

</head>

<body>

<img src='6.png' id='img1'/>

</body>

</html>

注：上面的6.png自己找图片替换上。

上面代码将不会弹出1。由于window.onload已经包含图片的onload了。而图片的onload是监听img的src是否载入完毕。去掉凝视就可以弹出1，不可弹出1的可能你的图片找不到。scr没有载入完毕。因此没有弹出1.

ps：img的onload事件也可灵活应用，像一些特殊业务需求的。无法追加window.onload事件等，而考虑採用img的onload事件，如载入一张小图片，做隐藏处理。里面调用onload事件。

window onload 与 img onload事件的更多相关文章

  1. window.load 和$(document).ready() 、window.load和body onload区别

    1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕.2.编写个数不同 w ...

  2. window.onload 和 body.onload 相互覆盖的本质

    从根源上讲,window.onload和<body onload="alert('test');"> 所绑定的对象都是window ,body是没有onload事件的, ...

  3. window.onload 、body.onload 以及 jQuery 等dom加载完成后执行脚本的区别

    1.关于window.onload 和 body.onload 的区别 当我们将onload 事件写在body元素上时,真正执行的其实是window对象的onload事件.因素HTMl页面中没有win ...

  4. window.onload，<body onload="function()">, document.onreadystatechange, httpRequest.onreadystatechang

    部分内容参考:http://www.aspbc.com/tech/showtech.asp?id=1256 在开发的过程中,经常使用window.onload和body onload两种,很少使用do ...

  5. window.onload，<body onload="function()">, document.onreadystatechange, httpRequest.onreadystatechang 分类： C1_HTML/JS/JQUERY 2014-08-06 16:47 558人阅读 评论(0) 收藏

    部分内容参考:http://www.aspbc.com/tech/showtech.asp?id=1256 在开发的过程中,经常使用window.onload和body onload两种,很少使用do ...

  6. IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素

    IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素. attachEvent(type,listener); listener函数中的 ...

  7. window.open('') 火狐，IE事件冒泡处理，点击事件冒泡处理

    window.open('') 火狐,IE事件冒泡处理,点击事件冒泡处理 写PC下拉菜单的时候,hover样式显示下拉菜单,可能会这样写 <li class="xb_li1" ...

  8. window.onload绑定多个事件 —— 两种解决方案

    前言 有些函数,必须在网页加载完毕后执行.比如:涉及DOM操作的. 网页加载完毕时会触发一个onload事件,将函数绑定到这个事件上即可. window.onload = myFunction; 问题 ...

  9. document.ready、window.onload、body.onload的区别

    document的ready事件通常会比window的onload事件先发生,为什么呢? 因为document的ready是在浏览器加载解析并构建完doc文档模型时发生的,而window的onload ...

随机推荐

  1. [ Python - 14 ] python进程及线程编程

    什么是进程: 简单来讲,进程就是操作系统中运行的程序或任务,进程和程序的区别在于进程是动态的,而程序是静态的.进程是操作系统资源管理的最小单位. 什么是线程: 线程是进程的一个实体,是cpu调度和分派 ...

  2. 错误”ORA-12560: TNS: 协议适配器错误“解决方法

    错误”ORA-12560: TNS: 协议适配器错误“解决方法 原本是可以通过sqlplus连接数据库的,命令如下: C:\Users\xuwei>sqlplus /nolog SQL*Plus ...

  3. js一段小代码（浏览器用alert,否则用console)

    (function(){ var root=this, isBrowserSide=false; if(typeof window !=="undefined" && ...

  4. springboot 返回json格式数据的时间格式配置

    #时间戳统一转换 spring.jackson.date-format=yyyy-MM-dd HH:mm:ss spring.jackson.time-zone=GMT+8 NOTE:time-zon ...

  5. 前端工程师必备PS技能

    PS参考线及其辅助 视图-->新建参考线 也可以快捷键Ctrl+R,显示区的上侧和左侧就会出现标尺.任意点选中,并拖动标尺,便会出现浅蓝色的辅助线.只有在移动工具下,才能拖动某一条参考线. 删除 ...

  6. redis的持久化(RDB&AOF的区别)

    RDB 是什么? 在指定的时间间隔内将内存中的数据集快照写入磁盘, 也就是行话讲的Snapshot快照,它恢复时是将快照文件直接读到内存里. Redis会单独创建(fork)一个子进程来进行持久化,会 ...

  7. Lookup 组件用法全解

    Lookup是查找的意思,Lookup组件实现两个数据源的连接,和Join语句实现的功能类似,使用Lookup 组件需要配置: 两个输入:一个是上游数据流的输入Source Table,一个是要查找的 ...

  8. 静态页面表单中js验证

    笔记: 1. onblur事件:onblur 事件会在对象失去焦点时发生.http://www.w3school.com.cn/jsref/event_onblur.asp onkeyup事件:onk ...

  9. Codeforces #447 Div2 E

    #447 Div2 E 题意 给出一个由有向边构成的图,每条边上有蘑菇,假设有 \(n\) 个蘑菇,那么第一次走过这条边可以获得 \(n\) 个蘑菇,第二次 \(n-1\),第三次 \(n-1-2\) ...

  10. 5、Django实战第5天：首页和登录页面的配置

    从这天开始我们需要用到前端源码,需要的朋友可以进行小额打赏(15元),打赏二维码在博客的右侧,打赏后可以凭截图联系463951510@qq.com,博主收到邮件后会立即回复发送所有源码素材,实战过程中 ...