vue n-load代码实例

Vue.js中的`nLoad`通常是指一种懒加载（Lazy Loading）策略，它用于优化用户体验，只在用户滚动到某个元素或者需要展示的时候才加载内容。这在处理大量数据或者图片时特别有用，可以减少初始页面加载的时间。

以下是一个简单的Vue组件的例子，展示了如何使用`v-if`或`v-show`配合`@scroll`事件实现图片懒加载：

<template>
  <div ref="lazyImageRef">
    <img :src="lazySrc" v-if="!isLoaded" @load="handleLoad" />
    <div v-if="isLoaded">图片已加载完成</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lazySrc: 'default-src.jpg', // 默认占位图路径
      isLoaded: false,
      lastScrollTop: 0,
    };
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll(e) {
      const st = window.pageYOffset || document.documentElement.scrollTop;
      if (st > this.lastScrollTop) { // 如果滚动位置有变化
        if (this.$refs.lazyImageRef.getBoundingClientRect().top <= window.innerHeight) { // 当图片进入可视区域时
          this.lazySrc = 'real-image.jpg'; // 更新真实图片地址
          this.isLoaded = true; // 设置已加载标志
        }
      }
      this.lastScrollTop = st;
    },
    handleLoad() {
      this.isLoaded = true; // 图片加载完成后更新状态
    },
  },
};
</script>

在这个例子中，当用户滚动到底部并接近图片时，`handleScroll`会被触发并检查图片是否进入了视口。如果进入了，就更换成实际的图片URL，并设置`isLoaded`为`true`。