Image onload 事件

最新推荐文章于 2023-07-06 11:45:00 发布
转载 最新推荐文章于 2023-07-06 11:45:00 发布 · 1.5k 阅读 · 0

本文介绍了 HTML 中 Image 对象的 onload 事件，该事件在图片加载完成后触发，并执行指定的 JavaScript 代码。文章通过示例代码展示了如何使用 onload 事件来实现图片加载完成后的弹窗提示。

Image onload 事件

Image 对象参考手册 Image 对象

定义和用法

onload 事件在图片加载完成后立即执行。

语法

onload=" JavaScriptCode"

参数 描述
JavaScriptCode 必须。在事件触发后执行的Javascript代码。

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主要浏览器都支持 onload 事件

实例

实例

在图片载入完成后弹出 "图片加载完成" :

<html>
<head>
<script>
function loadImage()
{
alert("图片加载完成");
}
</script>
</head>

<body>
<img src="w3javascript.gif" onload="loadImage()">
</body>
</html>

尝试一下 »

Image 对象参考手册 Image 对象
JavaScript与Image加载事件(onload)、加载状态(complete)
10-28
在网页开发中，我们经常需要动态加载图片，这时就需要利用到Image对象的加载事件（onload）和加载状态（complete）属性。这两个特性可以帮助我们实时监控图片的加载进度，从而实现更灵活的交互效果。 首先，`onload...
js的image onload事件使用遇到的问题
12-12
关于 Image 对象 onload 事件。 想获取的是 image 的 宽高值。所以用 onload 方法。另外是获取的远程图片。 但IE在第二次显示图片的时候，总是不走 onload 方法。代码： var img = new Image(); img.src = "loading.gif"; img.onload = function(){ var iheight = img.height; var iwidth = img.width; }; 后来给xiaoniu同学看了后才知，img.src 应该是放在 onload 方法后边的。。 后来google下，才发现原来此类问题大家多有总
javascript 中的图像加载事件
迹忆客
07-06 1621
我们需要创建一个警告框，当 onload 事件在图像上触发时，它将显示一条消息，说明图像已成功加载。如果我们不想使用 JavaScript，我们可以使用 HTML 属性来检查图像是否已加载。因此，在这些属性的帮助下，我们可以创建一个警告框，在加载图像时显示一条消息，说明图像已成功加载。在 HTML 中，onload 属性在图像加载成功时触发，而 onerror 属性在加载图像时发生错误时触发。如果在加载图像时发生错误，它将显示一条消息，指出图像未加载。如果我们运行代码，它会显示图像加载成功的警告消息。
image的加载事件(onload)和加载状态(complete)
苍穹之上倚天长鸣的博客
04-01 2927
之前做过这样一个需求，要让商家页的商家图片按照图片外面box的大小等比例缩放。之前的想法是在页面中先输出图片的src，然后在页面底部初始化js，然后在js中写相应的可以使图片按照box的大小等比例缩放的函数。要实现图片的等比例缩放要做到以下几点， 第一，得到图片的width和height 第二，比较图片的width和height与box的width的height的大小，共有四种情况，
搞清Image加载事件(onload)、加载状态(complete)后，实现图片的本地预览，并自适应于父元素内(完成)...
weixin_34278190的博客
08-04 1369
onload与complete介绍 complete只是HTMLImageElement对象的一个属性，可以判断图片加载完成，不管图片是不是有缓存；而onload则是这个Image对象的load事件回调，当图片加载完成后执行onload绑定的函数。 给下面一个例子，解释下： document.getElementById('load').onclick = function() { ...
JS。某 image onload。
hanyuxinting的专栏
06-23 4482
关于 Image 对象 onload 事件。 想获取的是 image 的 宽高值。所以用 onload 方法。另外是获取的远程图片。 但IE在第二次显示图片的时候，总是不走 onload 方法。代码： var img = new Image();img.src = "loading.gif";img.onload = function(){var iheight
在我们使用image.onload读取图片文件的时候，onload的加载问题
weixin_42257506的博客
10-08 5590
在我们使用image.onload读取图片文件的时候，onload的加载问题 照片在流浪器或者APP中有无缓存，会影响onload对图片文件的读取 不知道大家用没用过image.onload方法，如果照片有缓存，那么onload方法将直接读取缓存的图片（当然，读取图片命名不变的情况下，因为我的目的是，通过活体检测，获取到实时检测的新的照片，转成base64数据上传到后台，每次得到的照片都相同命名，...
js 实现图片预加载(js操作 Image对象属性complete ，事件onload 异步加载图片)
12-04
– function addImg(isrc) { var Img = new Image(); Img.src = isrc; Img.onload = function () { document.body.appendChild(Img); } } //–> [removed] 当包含上述代码的页面打开时并不载入 “tt.jpg” ，当点击...
IE中Image .onload方法问题
axl---专心专注于web前端开发
06-10 244
在web开发在获取图片宽高是很正常的事情，图片在加载完成前是获取不到图片的宽高的，在加载完成后才可以获取图片本身的宽高，例如： 1 var img = new Image(); 2 img.src = "loading.gif"; 3 img.onload = function(){ 4 alert ( img.w...
Image和onload
Sugarman0620的博客
09-20 823
一、JS的new image（）用法 创建一个Image对象：var a = new Image(); 定义Image对象的src：a.src="xxx.gif";这样就相当于给浏览器缓存一张照片了。<body> <img src="" alt="" id="pic"/> <script> var a...
image对象onload方法
hyc0204的专栏
11-15 5622
刚使用过，记下来以后用的时候好找。 window.onload = function(){ var img = new Image(); img.src = "1.jpg"; img.onload = function(){ if(img.complete) document.getElementById("img_id").src = img.src; } }
js 实现图片预加载 （js操作 Image对象属性complete ，事件onload 异步加载图片）
astraydog的专栏
09-07 3119
<br />通过js操纵DOM很多情况下都是为了实现和当前页html元素的异步载入，我谈谈对Image对象的一些认识。<br />看个例子：<br /><input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" /><br /><script type="text/javascript"><br /><!--<br />    function addImg(isrc)<br />    {<br />        var Im
在img里的onload事件 使图片按比例缩放 及其注意事项
ccaakkee的专栏
01-16 2214
script language="JavaScript">//图片按比例缩放var flag=false;function DrawImage(ImgD,iwidth,iheight){    //参数(图片,允许的宽度,允许的高度)     var image=new Image();     image.src=ImgD.src;    if(image.width>0 && image.
关于IE中image的onload事件失效解决问题
abcd3699的博客
08-25 366
这两天做一个简单的图片查看器，其中用到了“上一页”和“下一页”，加载图片的时候用new Image()，然后设置image的src属性，在Google Chrome/Opera/FireFox中一切正常；代码如下： 1 var i = new Image(); 2 i.src = _this.settings.imgs[_this.currIndex]; 3 //baidu.d...
IE浏览器中Image对象onload失效的解决办法
gaokcl的博客
09-25 2714
IE浏览器中Image对象onload失效的解决办法 前言：作为WEB设计者，为了在网页展示上加强用户体验，经常会利用图象载入显示状态方法，              这自然需要Image对象的onload事件。 在firefox浏览器下完成开发后，可是在IE浏览器中进行调试总不能被调用。 不管是最新版的IE8还是旧版本的IE7和IE6都无效，最初的代码简化后如下：
onload事件用法
最新发布
10-29
onload事件会在页面或图像加载完成后立即发生，以下是几种常见的使用方法： ### 全局页面的onload事件绑定 通过`window.onload`属性可以绑定全局的`onload`事件处理函数，匿名函数会在页面加载完成后被调用。示例代码如下： ```javascript window.onload = function () { // 页面所有的资源加载完后执行 console.log('页面加载完成'); } ``` 此方法确保在页面的所有元素（包括图片、脚本等）都加载完毕后，才执行指定的函数。 [^1] ### 静态注册页面的onload事件 可以在HTML的`<body>`标签中使用`onload`属性，指定页面加载完成后调用的函数。注意函数调用时不要丢了小括号。示例代码如下： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body onload="ready()"> <script type="text/javascript"> function ready() { document.getElementById("btn").onclick = function () { alert("load加载完成事件"); } } </script> <input type="button" value="button" id="btn" /> </body> </html> ``` 在这个例子中，当页面加载完成后，会调用`ready`函数，该函数为按钮添加了点击事件。 [^2] ### 绑定图片的onload事件 可以为图片元素绑定`onload`事件，当图片加载完成后执行相应的操作。示例代码如下： ```javascript var image = new Image(); image.onload = function () { // 图片加载完成后执行的操作 console.log('图片加载完成'); }; image.src = "image.jpg"; ``` 这里创建了一个新的图片对象，为其`onload`属性赋值一个函数，最后设置图片的`src`属性。当图片成功加载后，就会执行该函数。 [^1]
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值