1.新建plugin.js文件：
const LazyLoadPlugin = {
install(Vue) {
Vue.directive('lazy', {
// 在绑定元素插入到 DOM 中
inserted: function (el, binding) {
// IntersectionObserver API 检测元素是否进入视口
const observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
// 加载图片
el.src = binding.value;
// 停止观察该元素
observer.unobserve(el);
}
});
// 开始观察该元素
observer.observe(el);
}
});
}
};
export default LazyLoadPlugin;
2.在main.js里注册：
// main.js
import Vue from 'vue';
import App from './App.vue';
import LazyLoadPlugin from './lazyLoadPlugin';
Vue.use(LazyLoadPlugin);
new Vue({
render: h => h(App)
}).$mount('#app');
<template>
<img v-lazy="'path_to_your_image.jpg'" alt="Lazy Loaded Image">
</template>
