(一) js原生实现方法
css 代码段
<style scoped lang="scss">
.loading {
width: 100%;
display: flex;
flex-wrap: wrap;
.wrapper {
width: 50%;
img {
width: 100%;
height: 254px;
}
}
}
</style>
html 代码段
<template>
<div class="loading">
<div v-for="(value,index) in imgSrc" :key="index" class="wrapper">
<!-- 自定义data_src属性,图片默认的路径是loading图片 -->
<img src="/static/img/loading.gif" :data_src="value.src" />
</div>
</div>
</template>
js 代码段
<script>
export default {
data() {
return {
// 图片路径数据
imgSrc: [
{ src: "/static/img/001.jpg" },
{ src: "/static/img/002.jpg" },
{ src: "/static/img/003.jpg" },
{ src: "/static/img/004.jpg" },
{ src: "/static/img/005.jpg" },
{ src: "/static/img/006.jpg" },
{ src: "/static/img/007.jpg" },
{ src: "/static/img/008.jpg" },
{ src: "/static/img/009.jpg" },
{ src: "/static/img/010.jpg" },
{ src: "/static/img/011.jpg" },
{ src: "/static/img/012.jpg" },
{ src: "/static/img/013.jpg" },
{ src: "/static/img/014.jpg" },
{ src: "/static/img/015.jpg" },
{ src: "/static/img/016.jpg" },
{ src: "/static/img/017.jpg" },
{ src: "/static/img/018.jpg" }
]
};
},
created() {},
mounted() {
// 当页面加载完成之后和滚动的时候调用srcChange()
this.srcChange();
window.addEventListener("scroll", this.srcChange);
},
methods: {
srcChange() {
// 获取dom元素
let html = document.documentElement || document.body;
let imgs = document.querySelectorAll("img");
for (var i = 0; i < imgs.length; i++) {
// 如果可视高度+页面的滚动高度如果小于图片距离顶层的位置高度
// 就证明图片进入可是区域
if (html.clientHeight + html.scrollTop > imgs[i].offsetTop) {
//就把图片的src替换成绑定的data_src值
imgs[i].src = imgs[i].getAttribute("data_src");
}
}
}
}
};
</script>
(二) vue-lazyload实现方法
(1)安装插件
npm install vue-lazyload --save-dev
(2)在入口文件 man.js 中引入并使用
import VueLazyload from 'vue-lazyload'
然后在 vue 中直接使用
Vue.use(VueLazyload)
或者添加自定义选项
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})
(3)在 vue 文件中将 img 标签的 src 属性直接改为 v-lazy ,从而将图片显示方式更改为懒加载显示:
<img v-lazy="/static/img/1.png">