【Vue】image 显示预设图 | @load

@load 用在图片标签时

• image src 有值的时候，才会开始加载
• onload 事件是在 src 的资源加载完毕的时候，才会触发

<img src="showImg.png" @load="isLoad">

methods:{
    isLoad(){
        console.log('资料加载完毕')
    }
}

实际制作图片的预设图

template

<div class="loading-image">
    <img @load="successLoadImg" v-bind:src="spot.Picture.PictureUrl1" alt="载入图片">
</div>

style

.loading-image{
    height: 100%;
    position: relative;
    background-color: #FFF;
    background-image: url(../src/assets/loading.png);
    background-repeat: no-repeat;
    background-size: 100%;
    &.hide{
        display: none;
    }
}

js
利用 prototype 设定全局函式，可以重复使用。

Vue.prototype.successLoadImg = function (event){
    event.target.parentElement.classList.add('hide');
    document.querySelectorAll(".loading-image.hide").forEach(e => e.remove())
};

参考来源：
https://blog.csdn.net/muzidigbig/article/details/115167044
https://www.itread01.com/article/1489633818.html