:
目前浏览器图片懒加载的方式有两种，一种是针对 元素的懒加载，这种方式是浏览器层面实现的懒加载，另一种是基于 JavaScript 实现的懒加载，这种方式可以针对任何元素图片懒加载，操作简单，兼容性好，是较为为主流的图片懒加载方式。
在 VUE 中图片懒加载功能可用
- src 图片源地址
- loading 图片加载状态，可选值有 "default", "lazy"，默认值 "default"
- placeholder 图片占位图源地址，默认值 "data:image/png;base64, empty"
- error-image 图片加载错误时显示的图片源地址，默认值 "data:image/png;base64, X...4M=EAAAA...40=u...1..E...=4."
- sizes 用于监听元素尺寸变化
- srcList 图片的备用 src 数组
- success 图片加载成功时触发
- error 图片加载失败时触发
- load 图片加载中时触发
- loading 图片加载中的内容
- error 图片加载失败时的内容
- default 图片加载成功的默认内容
以下是 VUE 图片懒加载的演示代码：
<template>
<vue:img src="https://img.alicdn.com/00000/xx/xx/xx/xx-1.png" loading="lazy" placeholder="data:image/png;base64,d4d1d931b55de03f5d4f590b91f4537b51d931b55de03f5d4f590b91f453" error-image="data:image/png;base64, X...4M=EAAAA...40=u...1..E...=4." sizes="100vw" @success="handleSuccess" @error="handleError" @load="handleLoad">
<template #loading>
<div style="color:#99a9a9">图片加载中...</div>
</template>
<template #error>
<div style="color:#99a9a9">图片加载失败，请重试</div>
</template>
<template #default>
<img alt="图片内容"></img>
</template>
</vue:img>
</template>
<script>
export default {
methods: {
handleSuccess(e) {
// 图片加载成功时触发
},
handleError(e) {
// 图片加载失败时触发
},
handleLoad(e) {
// 图片加载中时触发
}
}
}
</script>希望本文对您有所帮助，如果有任何疑问，请尽管联系我们。
