Vue3图片懒加载（vue3-lazyload）

Vue2图片懒加载

参考文档：vue3-lazyload

效果如下图：vue3-lazyload@0.3.8

在线预览

安装

npm install vue3-lazyload
# or
yarn add vue3-lazyload
# or
pnpm add vue3-lazyload

引入并注册

import { createApp } from 'vue'
import VueLazyLoad from 'vue3-lazyload'
import Default from 'images/default.jpg'
import Error from 'images/error.jpg'
import App from './App.vue'const app = createApp(App)
app.use(VueLazyLoad, {loading: Default, // 加载中占位图error: Error, // 加载失败占位图lifecycle: {loading: (el: Element) => {console.log('loading', el)},error: (el: Element) => {console.log('error', el)},loaded: (el: Element) => {console.log('loaded', el)}}
})
app.mount('#app')

使用

基本使用

<script lang="ts" setup>
import { ref } from 'vue'
const Image1 = ref('https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/5.jpg')
</script>
<template><div class="m-image"><img class="u-image" v-lazy="Image1" /></div>
</template>
<style lang="less" scoped>
.m-image {width: 200px;height: 200px;border: 1px solid #d9d9d9;border-radius: 8px;.u-image {width: 100%;height: 100%;border-radius: 8px;&[lazy=loading] {object-fit: cover;}&[lazy=loaded] {object-fit: contain;}}
}
</style>

自定义配置

<script setup lang="ts">
import { ref } from 'vue'
import { Space, Button } from 'vue-amazing-ui'
import 'vue-amazing-ui/css'
const Image1 = 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/5.jpg'
const Image2 = 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/8.jpg'
const Image3 = 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/9.jpg'
const lazyOptions = ref({src: Image1,// loading: Image2,// error: Image2,lifecycle: {loading: (el: Element) => {console.log('image loading', el)},error: (el: Element) => {console.log('image error', el)},loaded: (el: Element) => {console.log('image loaded', el)}}
})
function onClick () {lazyOptions.value.src = Image3
}
</script>
<template><Space align="center" :size="30"><div class="m-image"><img class="u-image" v-lazy="{...lazyOptions}" /></div><Button type="primary" @click="onClick">Change Image</Button></Space>
</template>
<style lang="less" scoped>
.m-image {width: 200px;height: 200px;border: 1px solid #d9d9d9;border-radius: 8px;.u-image {width: 100%;height: 100%;border-radius: 8px;&[lazy=loading] {object-fit: cover;}&[lazy=loaded] {object-fit: contain;}}
}
</style>

延迟加载

<script lang="ts" setup>
import { ref } from 'vue'
import { Space, Button } from 'vue-amazing-ui'
import 'vue-amazing-ui/css'
const Image1 = 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/5.jpg'
const Image2 = 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/8.jpg'
const Image3 = 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/9.jpg'
const lazyOptions = ref({src: Image1,// loading: Image2,// error: Image2,lifecycle: {loading: (el: Element) => {console.log('image loading', el)},error: (el: Element) => {console.log('image error', el)},loaded: (el: Element) => {console.log('image loaded', el)}}
})
function onClick () {lazyOptions.value.src = Image3
}
</script>
<template><Space align="center" :size="30"><div class="m-image"><img class="u-image" v-lazy="{...lazyOptions, delay: 1000}" /></div><Button type="primary" @click="onClick">Change Image</Button></Space>
</template>
<style lang="less" scoped>
.m-image {width: 200px;height: 200px;border: 1px solid #d9d9d9;border-radius: 8px;.u-image {width: 100%;height: 100%;border-radius: 8px;&[lazy=loading] {object-fit: cover;}&[lazy=loaded] {object-fit: contain;}}
}
</style>