vue 图片懒加载

最新推荐文章于 2023-08-12 16:54:25 发布

Flipped525

最新推荐文章于 2023-08-12 16:54:25 发布

阅读量120

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Flippedguky/article/details/128791567

版权

<template>
  <view class="">
  	// 给img 设置自定义属性data-src
  	// data-src为真正要展示的图片
  	// src为占位图片
    <img
      src="https://s1.ax1x.com/2022/12/01/z01OWF.md.jpg"
      class="avatar"
      data-src="../static/btn_enter.png"
    />
    <img
      src="https://s1.ax1x.com/2022/12/01/z01OWF.md.jpg"
      class="avatar"
      data-src="../static/azIcon.png"
    />
    <img
      src="https://s1.ax1x.com/2022/12/01/z01OWF.md.jpg"
      class="avatar"
      data-src="../static/btn_enter@2x.png"
    />
    <img
      src="https://s1.ax1x.com/2022/12/01/z01OWF.md.jpg"
      class="avatar"
      data-src="../static/btn_fabu.png"
    />
    <img
      src="https://s1.ax1x.com/2022/12/01/z01OWF.md.jpg"
      class="avatar"
      data-src="../static/btn_tianjiashipin.png"
    />
    <img
      src="https://s1.ax1x.com/2022/12/01/z01OWF.md.jpg"
      class="avatar"
      data-src="../static/component.png"
    />
    <img
      src="https://s1.ax1x.com/2022/12/01/z01OWF.md.jpg"
      class="avatar"
      data-src="../static/componentHL.png"
    />
    <img
      src="https://s1.ax1x.com/2022/12/01/z01OWF.md.jpg"
      class="avatar"
      data-src="../static/approval/cancel-status.png"
    />
    <img
      src="https://s1.ax1x.com/2022/12/01/z01OWF.md.jpg"
      class="avatar"
      data-src="../static/templateHL.png"
    />
    <img
      src="https://s1.ax1x.com/2022/12/01/z01OWF.md.jpg"
      class="avatar"
      data-src="../static/uni.png"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgShow: true,
    };
  },
  created() {},
  mounted() {
 	// 第一次加载，加载已在当前视图的图片
    this.imgonload();
    // 监听窗口滚动
    this.scroll();
  },
  methods: {
    // 监听滚动
    scroll() {
    // 设置一个节流优化
      window.addEventListener("scroll", () => {
        if (!this.imgShow) {
          return;
        }
        setTimeout(() => {
          this.imgonload();
          this.imgShow= true;
        }, 500);
        this.imgShow= false;
      });
    },
    imgonload() {
      //把伪数组转化为真数组
      // DOMobj.getBoundingClientRect().top   //获取该图片元素到屏幕顶部的距离
	  // window.innerHeight    //屏幕的高度
      let imgs = [...document.querySelectorAll(".avatar")];
      for (let i = 0; i < imgs.length; i++) {
        if (imgs[i].getBoundingClientRect().top < window.innerHeight) {
          let srcData = imgs[i].dataset.src.replace(
            "../",
            location.origin + "/"
          );
          // 判断当前图片是否加载完成 如果加载完成那么不在重复加载
          if (srcData != imgs[i].src) {
            imgs[i].src = imgs[i].dataset.src;
          }
        }
      }
    },
  },
};
</script>

<style>
.avatar {
  display: block;
  width: 90%;
  height: 500rpx;
  margin: 0 auto;
}
</style>