[JS] 如何判断图片加载完毕

使用场景:
有时需要获取图片的尺寸,这需要在图片加载完成以后才可以。

  1. img标签的load事件
    这个事件会在图片加载完成之后触发,并执行img绑定的onload函数。
    (onload是这个Image对象的load事件回调,当图片加载完成后执行onload绑定的函数)

[JS] 如何判断图片加载完毕_第1张图片

src指向地址无图片,img不能加载,始终是loading。

给src一个真实的图片资源地址,当图片加载完成后,p1的内容会变成loaded。

上面这种方式同样适用于用new Image()方式创建的HTMLImageElement,
如:

image.png

[JS] 如何判断图片加载完毕_第2张图片

图片加载成功后,控制台会输出 success

2.img标签的complete属性
(HTMLImageElement.complete)
HTMLImageElement 的只读属性 complete 是一个布尔值,表示图片是否完全加载完成。
如果使用它来判断,应使用计时器,轮询的方式来处理。

[JS] 如何判断图片加载完毕_第3张图片

image.png

HTMLImageElement.complete当图片完全加载完成时值为 true;否则,值为 false。

以下任意一条为true则认为图片完全加载完成:(来自mdn)
(1) src和srcset属性都没有指定。
(2) 无srcset属性,同时src属性为空串””。
(3) 图像资源已被完全获取,并已排队用于渲染/合成。
(4) image元素已经确定图像是可以使用且准备好的(如缓存)。
(5) 图像“损坏”。(由于错误或图像加载被禁用而导致图像加载失败)


image.png

[JS] 如何判断图片加载完毕_第4张图片

image.png

image.png

image.png

[JS] 如何判断图片加载完毕_第5张图片

[JS] 如何判断图片加载完毕_第6张图片

你可能感兴趣的