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">