vue2实现图片懒加载

Vue2中实现图片懒加载可以使用Intersection Observer API方法和VueLazyload插件。具体步骤如下：

在main.js中引入VueLazyload插件，并注册插件。
在需要懒加载的图片上添加v-lazy指令，并将lazyImg替换为需要懒加载的图片链接。
在VueLazyload插件中设置loading属性为需要显示的默认图片链接。
当图片进入可视区域时，Intersection Observer API方法会自动加载图片。

代码示例：
// main.js
import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'

Vue.config.productionTip = false

Vue.use(VueLazyload, {
loading: 'default.jpg' // 设置默认图片
})

new Vue({
render: h => h(App),
}).$mount('#app')

// App.vue
<template>
<div>
<img v-lazy="lazyImg" class="lazy" />
</div>
</template>

<script>
export default {
data() {
return {
lazyImg: 'lazy.jpg' // 需要懒加载的图片链接
}
}
}
</script>
登录后复制