Image onload 事件

红太狼 2020-05-24 16:15 834阅读 0赞

# Image onload 事件

通过 `<img>` 标签可以在页面中插入一个图片。

代码片段如下：

```javascript
<img src="ant.jpg">
```

src 属性规定了将要插入图片的地址，图片的加载需要时间。

一旦图片加载完毕，onload 事件将会触发（准确的说是 load 事件）。

onload 是注册事件处理函数的一种形式。

**代码实例如下：**

```javascript
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="https://www.dandelioncloud.cn/" /> 
<title>蒲公英云</title>
<script>
function loadImage(){
  var oDiv=document.getElementById("ant");
  oDiv.innerHTML="图片加载完成";
}
</script>
</head>
<body>
  <img src="static/image/common/logo_sc.png" onload="loadImage()">
  <div id="ant"></div>
</body>
</html>
```

当图片加载完毕，load事件触发，指定loadImage()函数，将指定文本写入div。

在实际应用中，可能需要动态 Image 对象，代码实例如下：

```javascript
var img=new Image();
img.onload=function(){
  var iheight=img.height;
  var iwidth=img.width;
  console.log("图片宽高分别为:"+iwidth+"和"+"iwidth");
};
img.src="https://www.dandelioncloud.cn/static/image/common/logo_sc.png";
```

代码分析如下：

（1）.首先通过构造函数创建一个Image对象实例img。

（2）.然后为img注册load时间处理函数，当图片加载完毕后，打印图片尺寸。

（3）.最后才是规定图片的地址，如果放在注册load事件处理函数之前，可能会出现问题。

（4）.假设图片加载迅速，在注册load事件处理函数之前就已经加载完毕，那么上述事件处理函数也就不会执行。

发表评论取消回复

表情：

评论列表（有 0 条评论，834人围观）

还没有评论，来说两句吧...

相关阅读

相关 window.onload事件触发条件

目录 window.onload 事件触发条件：鼠标的 mouseover 事件和 mouseenter 事件的区别

系统管理员/ 2023年01月11日 09:21/ 0 赞/ 132 阅读

相关 js事件拓展 onload事件

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

拼搏现实的明天。/ 2022年07月13日 23:19/ 0 赞/ 149 阅读

相关跨浏览器的iframe onload 事件监听

[http://hi.baidu.com/wyw5257/blog/item/fbe152cb8e7a8614be09e617.html][http_hi.baidu.com_

以你之姓@/ 2022年07月13日 16:23/ 0 赞/ 139 阅读

相关跨浏览器的iframe onload 事件监听(转)

很多时候，我们会需要改变一个iframe的地址（src属性），或者使用表单(form)的target在指定的iframe进行提交后，在 iframe加载完毕(onload)时立

た入场券/ 2022年07月10日 07:30/ 0 赞/ 193 阅读

相关 JavaScript值onload事件弹性方法

function addLoadEvent(func)\{ var oldοnlοad=window.onload;//用变量存储现有的事件处理函数 if(typeof

迈不过友情╰/ 2022年05月18日 03:05/ 0 赞/ 112 阅读

相关 JavaScript-onload和onclick事件

事件是对象的方法，以函数为载体。 onload事件 onload 事件会在页面或图像加载完成后立即发生。语法： οnlοad="SomeJavaSc

向右看齐/ 2022年04月18日 05:22/ 0 赞/ 174 阅读

相关 addLoadEvent函数与onload事件

addLoadEvent函数：页面第一次加载的时候触发事件； window.onload事件：页面加载完成后（加载完成后），立即执行；源码： <!DOCTYPE

Myth丶恋晨/ 2022年01月27日 04:11/ 0 赞/ 192 阅读

相关 onLoad

[页面一打开就执行JS的代码！][JS] onLoad window.onLoad=function()\{\} window.οnlοad=function(

冷不防/ 2021年09月26日 08:34/ 0 赞/ 210 阅读

相关 Image onload 事件

src 属性规定了将要插入图片的地址，图片的加载需要时间。一旦图片加载完毕，onload 事件将会触发（准确的说是 load 事件）。 onload 是注册事件处理函数...

红太狼/ 2020年05月24日 16:15/ 0 赞/ 835 阅读

相关 window.onload 事件

页面中很多JavaScript代码往往需要对应的文档结构或者内容加载完毕才能执行。否则可能会出现一些令初学者比较困惑的现象。

红太狼/ 2020年05月23日 18:38/ 0 赞/ 1147 阅读