Vue图片渐进式加载封装

图片渐进式加载

概念： 渐进式加载图片
思路: 通过 图片标签img 中 onload 事件 优先加载 模糊图片
做法: 模糊图片加载完成后触发onload事件, onload事件更改data中数据加载真实图片

渐进式图片子组件的封装

该渐进式组件接收一个对象（本地图片使用import 引入 【例子 import gradual from “@/src/img/img.png”的方式引入】）
{
	gradual: “”, 	// 模糊图片（图片地址）
    src: “ ” 		// 加载图片（图片地址）
}

<template>
    <div class="gradualImage">
        <img :src="gradualimage.img" alt="加载失败" @load="gradual(gradualimage)">
    </div>
</template>

<script>
    export default {
        name: 'gradualImage',
        props: {
            gradualing: {
                type: Object,
                default: function() {
                    return {
                        gradual: '', // 模糊图片
                        src: ''  // 加载图片
                    }
                }
            }
        },
        data() {
            return {
                gradualimage: {
                    gradual: '', // 模糊图片
                    src: '', // 加载图片
                    img: '' // 真实展示图
                }
            }
        },
        mounted() {
            this.remove();
        },
        methods: {
            // 重置清空数据
            remove() {
                this.gradualimage = {
                    gradual: this.gradualing.gradual,
                    src: this.gradualing.src,
                    img: this.gradualing.gradual
                }
            },
            // 渐进式加载图片
            gradual(gradualimage) {
                if(gradualimage.img == gradualimage.gradual) {
                    this.gradualimage = {
                        gradual: this.gradualing.gradual,
                        src: this.gradualing.src,
                        img: this.gradualing.src
                    }
                }
            }
        }
    }
</script>

<style scoped>
</style>