更新记录

1.0.1（2024-06-20）

支持图片懒加载，预加载，加载中与加载失败的占位符等，也可以自定义

1.0.0（2024-06-20）

支持图片懒加载，预加载，加载后的过渡效果，加载中与加载失败的占位符等

平台兼容性

参数说明

使用方法

导入 hzp-image-loading 后直接使用即可

<script>
    import hzpImageLoading from "@/components/hzp-image-loading/hzp-image-loading.vue"
    export default {
        components: {
            hzpImageLoading
        },
        data() {
            return {
                observer: '',
                list: ["https://img0.baidu.com/it/u=,&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500",
                    "https://img1.baidu.com/it/u=,&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500",
                    "https://img0.baidu.com/it/u=,&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500",
                    "https://img1.baidu.com/it/u=,&fm=253&fmt=auto&app=120&f=JPEG?w=888&h=500",
                    "https://img2.baidu.com/it/u=,&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
                    "https://img1.baidu.com/it/u=,&fm=253&fmt=auto&app=138&f=JPEG?w=1422&h=800",
                    "https://img1.baidu.com/it/u=,&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",
                    "https://img1.baidu.com/it/u=,&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
                    "https://img2.baidu.com/it/u=&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",
                    "https://img0.baidu.com/it/u=,&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
                    "https://img2.baidu.com/it/u=&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
                    "https://img2.baidu.com/it/u=,&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
                    "https://img0.baidu.com/it/u=,&fm=253&fmt=auto&app=138&f=JPG?w=500&h=281",
                    "https://img1.baidu.com/it/u=,&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
                    "https://img1.baidu.com/it/u=,&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
                ]
            }
        },
    }
</script>
<style lang="scss" scoped>
    .container {
        width: 600rpx;
        height: 60vh;
        display: flex;
        flex-direction: column;
        background: sandybrown;

        .scroll-list-box {
            height: 60vh;
            width: 100%;
        }

        .item-box {
            width: 375rpx;
            height: 200rpx;
            margin: 20rpx 0rpx;
            border: 4rpx solid #a541ff;
        }
    }
</style>