[JS] 如何判断图片加载完毕
使用场景：
有时需要获取图片的尺寸，这需要在图片加载完成以后才可以。
- img标签的load事件
这个事件会在图片加载完成之后触发，并执行img绑定的onload函数。
（onload是这个Image对象的load事件回调，当图片加载完成后执行onload绑定的函数）
![[JS] 如何判断图片加载完毕](https://img.it610.com/image/info9/727a3fc98566434481272ccd8c4e4dce.jpg)
文章图片
src指向地址无图片，img不能加载，始终是loading。
给src一个真实的图片资源地址，当图片加载完成后，p1的内容会变成loaded。
文章图片
上面这种方式同样适用于用new Image()方式创建的HTMLImageElement，
如:
![[JS] 如何判断图片加载完毕](https://img.it610.com/image/info9/1cc1d8a11d9842059f291735c6b71b54.jpg)
文章图片
![[JS] 如何判断图片加载完毕](https://img.it610.com/image/info9/aa17da0d26c14962a514c16a44c285d0.jpg)
文章图片
图片加载成功后，控制台会输出 success
2.img标签的complete属性
（HTMLImageElement.complete）
HTMLImageElement 的只读属性 complete 是一个布尔值，表示图片是否完全加载完成。
如果使用它来判断，应使用计时器，轮询的方式来处理。
![[JS] 如何判断图片加载完毕](https://img.it610.com/image/info9/ef32177c68c74fbcbf06af23a1d060c3.jpg)
文章图片
![[JS] 如何判断图片加载完毕](https://img.it610.com/image/info9/37a01fbdd52443a792cc6355099d3941.jpg)
文章图片
HTMLImageElement.complete当图片完全加载完成时值为 true；否则，值为 false。
以下任意一条为true则认为图片完全加载完成：（来自mdn）
(1) src和srcset属性都没有指定。
(2) 无srcset属性，同时src属性为空串””。
(3) 图像资源已被完全获取，并已排队用于渲染/合成。
(4) image元素已经确定图像是可以使用且准备好的(如缓存)。
(5) 图像“损坏”。(由于错误或图像加载被禁用而导致图像加载失败)
![[JS] 如何判断图片加载完毕](https://img.it610.com/image/info9/80386e00ae3a42bf910a840d51f26286.jpg)
文章图片
![[JS] 如何判断图片加载完毕](https://img.it610.com/image/info9/8d9eb47c41c54c4781c409d4f1e5e3ff.jpg)
文章图片
![[JS] 如何判断图片加载完毕](https://img.it610.com/image/info9/c1296efd1e5140b5b8f8fe2c2f570e3c.png)
文章图片
![[JS] 如何判断图片加载完毕](https://img.it610.com/image/info9/4eca8ab33dc04f99b6ffc11f1cf94dc7.jpg)
文章图片
![[JS] 如何判断图片加载完毕](https://img.it610.com/image/info9/85e514284c35428ab375fca43533bfbc.png)
文章图片
![[JS] 如何判断图片加载完毕](https://img.it610.com/image/info9/2af3f9b612164be785fd0ea5f3441ff7.jpg)
文章图片
【[JS] 如何判断图片加载完毕】
![[JS] 如何判断图片加载完毕](https://img.it610.com/image/info9/86466ee70ef9439fb19d391ab62b5925.png)
文章图片
