网络编程 
首页 > 网络编程 > 浏览文章

JavaScript判断图片是否已经加载完毕的方法汇总

(编辑:jimmy 日期: 2025/6/29 浏览:3 次 )

在网上有很多关于判断图片是否已经加载完毕的文章,但是有的浏览器并不适合,下面小编给大家分享一些有关JavaScript判断图片是否已经加载完毕方法汇总,具体内容如下所示:

一.onload事件

通过监听图片的onload事件,可以判断图片是否已经加载完成,兼容所有的浏览器(w3c推荐方法),代码示例如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img id="img1" src="/UploadFiles/2021-04-02/51c3bb99a21ea.jpg">

二.判断img对象(DOM)的complete属性

当img加载完成之后,complete对象属性将变为true,代码示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img id="img1" src="/UploadFiles/2021-04-02/51c3bb99a21ea.jpg">

亲测该方法同样可兼容所有浏览器

三.onreadystatechange事件

在ie下,img对象与xhr对象一样具有onreadystatechange事件,可以通郭建廷该事件判断图片是否加载完成,代码示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img id="img1" src="/UploadFiles/2021-04-02/51c3bb99a21ea.jpg">

该方法仅在ie下可用

上一篇:JS通过Cookie判断页面是否为首次打开
下一篇:jquery实现的判断倒计时是否结束代码
在去年的5月23日,借助Intel Bridge Technology以及Intel Celadon两项技术的驱动,Intel为PC用户带来了Android On Windows(AOW)平台,并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版,将Windows与安卓两大生态进行了融合,PC的使用体验随即被带入到了一个全新的阶段。