关于javascript:JS-如何判断图片加载完毕

6次阅读

共计 740 个字符,预计需要花费 2 分钟才能阅读完成。

应用场景:
有时须要获取图片的尺寸,这须要在图片加载实现当前才能够。

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

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

给 src 一个实在的图片资源地址,当图片加载实现后,p1 的内容会变成 loaded。
<img id=”img1″ src=”https://t7.baidu.com/it/u=3047886982,1218802067&fm=218&app=92&f=JPEG?w=121&h=75&s=931B56864047C14D4C168302030070DB”>

下面这种形式同样实用于用 new Image()形式创立的 HTMLImageElement,
如:

图片加载胜利后,控制台会输入 success

2.img 标签的 complete 属性
(HTMLImageElement.complete)
HTMLImageElement 的只读属性 complete 是一个布尔值,示意图片是否齐全加载实现。
如果应用它来判断,应应用计时器,轮询的形式来解决。

HTMLImageElement.complete 当图片齐全加载实现时值为 true;否则,值为 false。

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


正文完
 0