vue搞定图片懒加载

(一) 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">