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

目前image对象,有

onload
onerror
onabort

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

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

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

image.png

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

image.png

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

阅读 7k
3 个回答

先加加载中图标,onload就去掉不就可以了.


浏览器应该是没有支持到这里.

不过如果你是不希望看到逐行加载这个过程,可以选择渐进式(Progressive )的载入模式.

可以让图片由模糊逐渐清晰的加载.

用PS导出图片时,可以注意下选项

DOM 里没有提供,手动做法:

  1. 手动创建一个 <img>,用它加载,以当前时间作为起始时间。
  2. 加载完成后(onload)在把 src 赋给模版中的 <img>,并利用 v-if 控制它的显示。
  3. 期间做你想做的事情

因为会走内存缓存,第二次加载时间可以忽略不计。

<template>

 <img :src="url">

</template>

<script>

 export default {

  props: ['src'], // 父组件传过来所需的url

  data() {

   return {

    url: 'http://www.86y.org/images/loading.gif' // 先加载loading.gif

   }

  },

  mounted() {

   var newImg = new Image()

   newImg.src = this.src

   newImg.onerror = () => { // 图片加载错误时的替换图片

    newImg.src = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489486509807&di=22213343ba71ad6436b561b5df999ff7&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F77%2F31%2F20300542906611142174319458811.jpg'

   }

   newImg.onload = () => { // 图片加载成功后把地址给原来的img

    this.url = newImg.src

   }

  }

 }

</script>

参考:https://www.php.cn/js-tutoria...

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题