更新记录

1.0.0（2025-10-30） 下载此版本

支持懒加载、骨架屏、预加载等功能的图片组件

平台兼容性

uni-app(3.6.18)

其他

lz-image

图片懒加载+骨架屏组件，专为 uni-app 设计的高性能图片加载解决方案。

简介

lz-image 是一个功能丰富的图片组件，支持懒加载、骨架屏、预加载等功能，能够显著提升页面加载性能和用户体验。

功能特性

• 🚀 图片懒加载：滚动到视口时才加载图片
• 🎨 骨架屏展示：多种内置骨架屏样式
• ⚡ 预加载优化：智能预加载策略
• 🔄 加载状态管理：加载中/成功/失败状态
• 📱 全端兼容：支持 H5、小程序、App
• 🛠️ 易于使用：支持组件式使用方式

安装

通过 uni_modules 方式安装组件：

1. 将 lz-image 文件夹复制到项目根目录的 uni_modules 文件夹下
2. 在页面中直接使用组件，无需手动注册

使用方法

组件方式使用

<template>
    <view>
        <!-- 基础用法 -->
        <lz-image
            src="https://example.com/image.jpg"
            width="300px"
            height="200px" />

        <!-- 带骨架屏 -->
        <lz-image
            src="https://example.com/image.jpg"
            skeleton="card"
            width="300px"
            height="200px" />

        <!-- 自定义骨架屏 -->
        <lz-image
            src="https://example.com/image.jpg"
            width="300px"
            height="200px">
            <template #skeleton>
                <view class="custom-skeleton">自定义骨架屏</view>
            </template>
        </lz-image>

        <!-- 自定义错误状态 -->
        <lz-image
            src="https://example.com/invalid.jpg"
            width="300px"
            height="200px">
            <template #error>
                <view class="custom-error">图片加载失败</view>
            </template>
        </lz-image>
    </view>
</template>

API

Props

Events

Slots

骨架屏类型

• default: 默认灰色块状骨架屏
• circle: 圆形骨架屏（适用于头像）
• card: 卡片式骨架屏（适用于文章列表）
• list: 列表式骨架屏（适用于列表项）

兼容性

• Vue 2/3
• uni-app
• uni-app x
• H5、小程序、App 全平台

许可证

MIT