如何在NUXT中正确地延迟负载图像？

Question

是否可以同时将-SSR和Lazy -Loading用于客户端的图像。这是我的情况。我的标记与img [src]一起渲染，在我的chrome浏览器中，我按Ctrl+u，可以看到所有图像都具有SRC属性（SEO机器人会识别它们，我很高兴），但是在客户端，我需要拥有IMG [DATA-SRC]用于延迟加载。如果我在服务器端上有一个data-src属性，则SEO机器人找不到任何SRC（按Ctrl + U将证明这一点），但是所有图像都将带有懒惰加载...如果我过滤标记在接收客户端之前（实际上我确定如何在NUXT中实现它）。请提出任何解决问题的想法或指示？

Answer 1

这是实现以下方法的方法：

• 在移动视口
• （＆lt; 1000px）上以红线为代表的移动视口（＆lt; 1000px），
• 如果您的视口更宽，则您有4个图像（桌面viewport）
• 在这里进行繁重的举重，在不旧的浏览器
• 从移动设备开始，打开您的网络选项卡，按名为6的图像过滤，您会发现，如果增加视口＆gt，您将获得一些网络请求。 1000px（滚动滚动时，懒惰加载）

<template>
  <div>
    <pre>all the interesting images: {{ pokemon.sprites.other }}</pre>
    <div class="reference-breakpoint"></div>

    <p>Down below are all the remaining images ⬇️</p>
    <img :src="pokemon.sprites.other.dream_world.front_default" />
    <img
      class="hide-when-mobile"
      loading="lazy"
      :src="pokemon.sprites.other.home.front_default"
    />
    <img
      class="hide-when-mobile"
      loading="lazy"
      :src="pokemon.sprites.other.home.front_shiny"
    />
    <img
      class="hide-when-mobile"
      loading="lazy"
      :src="pokemon.sprites.other['official-artwork'].front_default"
    />
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const pokemon = await $axios.$get(
      'https://pokeapi.co/api/v2/pokemon/charizard'
    )
    return { pokemon }
  },
}
</script>

<style scoped>
img {
  display: block;
  height: 100vh;
  width: auto;
}
.reference-breakpoint {
  width: 1000px;
  height: 1rem;
  background-color: red;
}
@media (max-width: 1000px) {
  .hide-when-mobile {
    display: none;
  }
}
</style>

---

对此不满意吗？这是一个 InterSectionObserver 示例，示例更为复杂，但也更加灵活。