图片懒加载的原理

  1. 替换图片源：将图片的src属性替换为自定义属性，如data-src。
  2. 监听滚动事件：监听页面滚动事件，获取当前滚动位置和图片位置。
  3. 判断图片是否进入可视区域：使用getBoundingClientRect() API获取图片位置，与滚动位置进行比较。
  4. 加载图片：当图片进入可视区域时，将data-src的值赋给src属性，触发图片加载。

Vue.js中的lazy方法

// 引入Lazyload组件
import Lazyload from 'vue-lazyload';

// 使用Lazyload组件
Vue.use(Lazyload);

// 创建Vue实例
new Vue({
  el: '#app',
  data: {
    // 图片列表
    images: [
      'image1.jpg',
      'image2.jpg',
      'image3.jpg'
    ]
  },
  mounted() {
    // 初始化Lazyload
    this.lazyLoadInit();
  },
  methods: {
    lazyLoadInit() {
      // 设置Lazyload选项
      const lazyConfig = {
        loading: 'loading.gif', // 加载中图片
        error: 'error.jpg', // 加载失败图片
        attempt: 3 // 尝试加载次数
      };
      // 创建Lazyload实例
      new Lazyload(this.$el, lazyConfig);
    }
  }
});

lazy方法的优点

Vue.js中的lazy方法具有以下优点：

  1. 简单易用：只需要在Vue实例中引入Lazyload组件，并设置相应的选项，即可实现图片懒加载。
  2. 高效：lazy方法采用了IntersectionObserver API，可以异步监听图片是否进入可视区域，从而提高页面性能。
  3. 兼容性好：lazy方法支持多种浏览器，包括IE11及以上版本。

总结