vue如何判断图片已经加载完成？

Question

一开始想到用this.$nextTick,大部分情况下是可行的。但是如果图片较大,网速较慢的情况下,图片在加载一半的时候this.$nextTick里的方法就执行了。所以有没有好的方法判断图片是否加载完成呢？

Answer 1

很久以前写过一个东西，你可以参考下思路，这里你得预先知道要加载哪些图片，这种功能就跟Vue没什么关系了，是js自己的一种实现：

const imgs = [
    'https://inews.gtimg.com/newsapp_bt/0/9906123226/1000',
    'https://inews.gtimg.com/newsapp_bt/0/9906123226/1000',
    'https://inews.gtimg.com/newsapp_bt/0/9906123226/1000',
    'https://inews.gtimg.com/newsapp_bt/0/9906123226/1000',
    'https://inews.gtimg.com/newsapp_bt/0/9906123226/1000',
    'https://inews.gtimg.com/newsapp_bt/0/9906123226/1000',
    'https://inews.gtimg.com/newsapp_bt/0/9906123226/1000',
    'https://inews.gtimg.com/newsapp_bt/0/9906123226/1000',
    'https://inews.gtimg.com/newsapp_bt/0/9906123226/1000',
    'https://inews.gtimg.com/newsapp_bt/0/9906123226/1000',
    'https://inews.gtimg.com/newsapp_bt/0/9906123226/1000',
    'https://inews.gtimg.com/newsapp_bt/0/9906123226/1000',
    'https://inews.gtimg.com/newsapp_bt/0/9906123226/1000'
];

function ready(pics) {
    const picsAll = pics.map((imgurl) => {
        imgurl = imgurl + '?v=' + Math.random(); // 仅是为了区分下不同的图片链接
        return new Promise((resolve, reject) => {
            const img = new Image();
            img.src = imgurl;
            img.onload = () => resolve(imgurl);
            img.onerror = () => reject(new Error(imgurl + ' load error'));
        })
    });
    Promise.all(picsAll).then(() => {
        console.log('load all success');
    }).catch((e) => {
        console.log(e);
    })
}

Answer 2

  <img   src="https://res.wx.qq.com/wxdoc/dist/assets/img/a.c0bcf4a8.png"  @load="handleLoad" >

  methods: {

       handleLoad(e){
          console.log(e)
       }
                
  }

Answer 3

有原生的的dom加载事件与错误事件, 监听一下然后数一数数量够了就全部加载完了