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

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

回答:

很久以前写过一个东西,你可以参考下思路,这里你得预先知道要加载哪些图片,这种功能就跟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);
    })
}

回答:

  <img   src="/wp-content/uploads/aaacj/202105021234/677210700.png"  @load="handleLoad" >
  methods: {

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

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注