用vue 写原生图片懒加载

实现原生图片懒加载，可以借助 Vue.js 的指令来完成。下面是一个使用 Vue.js 实现图片懒加载的示例代码：

1. 在 Vue.js 中注册一个指令：

Vue.directive('lazyload', {
  inserted: function (el) {
    let img = new Image();
    img.src = el.dataset.src;
    img.onload = function () {
      el.src = el.dataset.src;
    };
  }
});

2. 在 HTML 中使用该指令：

<img v-lazyload data-src="image.jpg" />

这样，当 img 元素进入可视区域时，就会触发指令中的 inserted 钩子函数，从而加载真正的图片。

相关问题

vue3实现图片懒加载

Vue3中实现图片懒加载通常可以利用Intersection Observer API，这是一种浏览器原生提供的功能，用于检测元素是否进入视口。以下是一个简单的步骤说明：

1. 安装依赖：首先需要安装`vue-lazyload`库，可以使用npm或yarn安装：

   npm install vue-lazyload
   # 或者
   yarn add vue-lazyload

2. 引入并配置：在Vue组件中引入`vue-lazyload`插件，并在data选项中设置懒加载策略：

   import VueLazyload from 'vue-lazyload'

   export default {
     components: {
       LazyImage: {
         lazy: true,
         error: '<img src="placeholder.png" alt="">', // 默认加载失败时显示的占位图
         loading: '<div class="lazy-loading">加载中...</div>', // 预览加载中效果
         height: 0, // 图片高度设置为0，让浏览器自动计算
         placeholder: undefined, // 可选，设置默认占位图
       }
     },
     mounted() {
       new VueLazyload({
         container: this.$el, // 指定需要观察的父元素
         observeViewport: true, // 是否监听滚动事件
         offset: 200, // 视口边缘距离图片顶部的距离，单位px，默认值500
       })
     },
   }

3. 使用懒加载组件：在模板中使用`<lazy-image>`标签替代常规的`<img>`标签：

   <template>
     <div>
       <lazy-image :src="imageSrc" />
     </div>
   </template>

当图片位于视口外时，不会立即加载，只有当它们进入视口一定范围时才会开始加载。这样可以节省初始页面的加载时间和带宽。

如何解决Vue中图片懒加载的问题？

在Vue中解决图片懒加载（即延迟加载，只有当图片进入视口时才开始加载）通常可以采用以下几种方法：

1. 使用第三方库：Vue环境下推荐使用如vue-lazyload、vue-v lazy或vue-slick-carousel等支持懒加载功能的轮播图或图片组件。安装后，根据库提供的API设置图片的`src`属性为占位符，待图片进入可视区后再动态替换为实际的图片URL。

<lazy-img :src="item.src" :placeholder="placeholder"></lazy-img>

2. 自定义指令：你可以创建一个自定义指令，比如`v-lazy`，利用Intersection Observer API检测元素进入视窗。当元素进入视窗时，再设置`src`属性为实际的图片地址。

export default {
  directives: {
    lazyload (el, binding) {
      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            el.src = binding.value;
            observer.unobserve(el);
          }
        });
      });

      observer.observe(el);
    }
  }
}

3. 利用浏览器原生特性：某些现代浏览器支持`Intersection Observer API`，直接在其元素上应用这个特性也可以实现懒加载。

无论是哪种方法，记得要在合适的生命周期钩子（如`mounted`或`beforeEnter`）中启用懒加载。