vue语法实现图片懒加载
- 一般网上说的懒加载都是说给图片src指定一张小的空白图片,真实url放在自定义的属性中,在图片进入视口后替换src在加载图片
- 但在实际开发中,有时候会遇到图片不多,一屏放得下,但是由于图片有点大导致图片像是一条一条加载,在这里也适用于懒加载
- 懒加载肯定需要js动态更新src,但是vue直接src赋值为真实图片地址是显示不了的,需要先
import
一下,src直接等于import
的值 - 将懒加载抽取为组件:
<template>
<img ref="lazyImg" :src="showSrc" alt="">
</template>
<script>
export default {
name: 'LazyImage',
props: {
smallImg: { // 小图
type: String,
default: ''
},
realImg: { // 大图
type: String,
default: ''
},
alwaysSmall: { // 控制是否替换小图,有的地方图片占位小,就不需要大图
type: Boolean,
default: false
}
},
data() {
return {
showSrc: '' // img绑定的src
}
},
watch: {
realImg: { // 监听大图地址,小图也一样
immediate: true, // 是否立即监听,就是说页面初始化那一次也算,能使得不需要再到created()里面再调用一次,减少代码
handler: function() { // 监听执行函数,只能使用function,不能箭头,箭头会拿不到this
if (this.alwaysSmall) {
this.showSrc = this.smallImg
} else {
this.updateImgSrc()
}
}
}
},
methods: {
// 在大图加载完成后更新图片src
updateImgSrc() {
this.showSrc = this.smallImg
const img = new Image()
img.src = this.realImg
img.onload = () => {
// 图片加载成功后的回调
this.showSrc = this.realImg
}
}
}
}
</script>
<style>
</style>
- 调用:
<lazyImg :small-img="url_s" :real-img="url" />
<lazyImg :small-img="url_s" :real-img="url" alwaysSmall />
alwaysSmall
直接有就行可以不用赋值,有就代表ture