vue中如何判断图片是否开始渲染

目前image对象,有

onload
onerror
onabort

三种事件,onload可以判断当前图片是否加载完成,那么在vue中,当img标签的src获取到数据的时候,有可能会先渲染别的图片(比如图片A),然后才渲染某一张图片(比如图片B),那么我如何知道图片B是否开始渲染呢?因为在拿到数据到开始渲染的中间会有一段空白时期,我想给这个空白时期设置一个加载中的图标

------------更新-------------
emm我想详细描述一下具体是哪段时间加一个加载中的图标
就是例如一个页面有5张大图,4张小图,分布在不同的位置
而这些图片,都是由同一个接口返回来的url
同时拿到url之后浏览器同时开始加载这些图片,网速调到很慢就会出现这种情况:
image.png

一开始是空白的,然后过了一会儿逐渐加载一点点,从上往下加载图片

image.png

先加载了一部分,然后逐渐加载另一部分:

image.png

然后我的需求就是想在图片还没开始加载的时候,就放一个加载中的图标,然后当它开始加载的时候(不是onload),就去掉这个加载中图标
,让它不存在空白的那个间隙,有办法实现不

待解决 悬赏分:0 - 离问题结束还有 456天13小时3分16秒
反对 0举报 0 收藏 0

我来回答

回答3