1.新建plugin.js文件：
const LazyLoadPlugin = {
install(Vue) {
Vue.directive('lazy', {
// 在綁定元素插入到 DOM 中
inserted: function (el, binding) {
// IntersectionObserver API 檢測(cè)元素是否進(jìn)入視口
const observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
// 加載圖片
el.src = binding.value;
// 停止觀察該元素
observer.unobserve(el);
}
});
// 開(kāi)始觀察該元素
observer.observe(el);
}
});
}
};
export default LazyLoadPlugin;
2.在main.js里注冊(cè)：
// 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>
