Vue 延迟加载，在图像加载时删除微调器

Question

我有一个 vue Nuxt 项目，我在其中使用 lazysizes 包探索延迟加载。

我创建了一个 spinner 组件（仅 html css），它应该只在图像加载时可见。

我还创建了一个包含微调器组件的 ImageItem 组件，它看起来像这样：

< script >
  import spinner from '~/components/spinner.vue'

export default {
  components: {
    spinner,
  },
  props: {
    source: {
      type: String,
      required: true,
    }
  },
} <
/script>

<style lang="scss" scoped>.imageItem {
  position: relative;
  .image {
    z-index: 2;
    &.lazyload,
    &.lazyloading {
      opacity: 0;
    }
    &.lazyloaded {
      opacity: 1;
      transition: all 1s linear 0.35s;
    }
  }
}

</style>

<template>
 <div class="imageItem">
  <spinner />
  <img class="image lazyload" :data-srcset="source" />
 </div>
</template>

为了解释我的代码，我有道具：source 其中在父组件中我传递了我想要延迟加载的图像。同样在 CSS 中，当图像正在加载时，图像具有 .lazyloading class 并且在加载时 .lazyloaded class。现在，当加载图像时，我将其放在微调器的顶部。

我的问题是，当我加载图像时，我想隐藏或破坏旋转器元素，因为我认为将图像放在顶部并不是最好的方法。有人可以指导我在加载图像时如何正确隐藏微调器吗？

Answer 1

Lazysizes 在加载图像完成时触发一个事件：lazyloaded 事件，所以你可以这样做：

<template>
    <div class="imageItem">
        <spinner v-if="lazyloading"/>
        <img class="image lazyload" :data-srcset="source" />
    </div>
</template>

<script>
import spinner from '~/components/spinner.vue'

export default {
    data(){
        return {
           lazyloading
        }
    },
    mounted(){
       document.addEventListener('lazyloaded', (e) => {
              this.lazyloading = false;
          }
       });
   }

}
</script>

Vue 延迟加载，在图像加载时删除微调器

Vue lazyloading, remove spinner when image loads

css

lazy-loading

image

vue.js

nuxt.js