为了账号安全,请及时绑定邮箱和手机立即绑定

基于Vue实现的图片懒加载组件

2019.08.13 17:38 282浏览

参数

属性集合
options: {
	width: 500,
	height: 500,
	margin: '20 auto 20',
	list: [
		image
	]
}

功能代码(可直接复制代码使用)

<template>
  <div class="lazy-load">
    <img v-for="(img, index) of list"
	     :key="index"	//这里不建议用下标作为标识,最好使用图片的Id号
	     :style="{width: `${width}px`, height: `${height}px`, margin: margin}"
	     alt="image"
	     src
	     :data-class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img" />
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Object,
      default: () => {}
    }
  },
  components: {},
  data() {
    return {};
  },
  computed: {
    width() {
      return this.options.width || 'auto';
    },
    height() {
      return this.options.height || 'auto';
    },
    margin() {
      let margin = this.options.margin || 'auto';
      let regex = /(\b\d+\b)/g;
      let str = margin.replace(regex, `$1px`);
      return str;
    },
    list() {
      return this.options.list || [];
    },
    cliceHeight() {
      let height = document.documentElement.clientHeight; // 可视区域的高度
      return height;
    }
  },
  watch: {},
  methods: {
    lazyload() {
      const domList = document.querySelectorAll('img');
      domList.forEach((item, index) => {
        let rest;
        if (!item.dataset.src) {
          return;
        }
        rest = item.getBoundingClientRect();
        if (rest.bottom >= 0 && rest.top < this.cliceHeight) {
          let img = new Image();
          img.src = item.dataset.src;
          img.onload = () => {
            item.src = img.src;
          };
          item.removeAttribute('data-src');
          item.removeAttribute('lazyload');
        }
      });
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.lazyload();
      window.addEventListener('scroll', this.lazyload);
    });
  },
  created() {}
};
</script>

<style lang='scss' scoped>
.lazy-load {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>

用法示例

<lazy-load :options="options" />

介绍一个关于replace的高阶用法:

'20 auto 50'.replace(/(\b\d+\b)/g, '$1px');	// 20px auto 50px

如果需要用到源文本中的部分内容,我们可以将这部分内容的匹配规则用括号包起来,用$n来表示
不局限于只有1个,$1…$n。

我是底部
一个很基础的功能,发表一些文章是想要逐渐养成写博客的习惯,如果对你有帮助,那真是一件很棒的事,如果内容有什么问题或建议,欢迎在下方留言。😀 😀 😀

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 邀请有奖 帮助中心 APP下载
官方微信

举报

0/150
提交
取消