Nuxt•2mo ago

NuxtImg & loading="lazy" load not fired after page route

Hi I am using NuxtImage with loading lazy like this

<script lang="ts" setup>
// …
function onLoad() {
  isLoaded.value = true
}
</script>
<template>
  <NuxtImg
    v-if="props.image.asset?._id"
    :src="props.image.asset._id"
    loading="lazy"
    :width="cropWidth"
    :height="cropHeight"
    :sizes="props.sizes"
    quality="80"
    :data-loaded="isLoaded"
    :alt="altText"
    class="opacity-0 transition-opacity duration-400 data-[loaded=true]:(opacity-100)"
    @load="onLoad"
  />

<script lang="ts" setup>
// …
function onLoad() {
  isLoaded.value = true
}
</script>
<template>
  <NuxtImg
    v-if="props.image.asset?._id"
    :src="props.image.asset._id"
    loading="lazy"
    :width="cropWidth"
    :height="cropHeight"
    :sizes="props.sizes"
    quality="80"
    :data-loaded="isLoaded"
    :alt="altText"
    class="opacity-0 transition-opacity duration-400 data-[loaded=true]:(opacity-100)"
    @load="onLoad"
  />

However this onLoad function is only fired once; but if I route between pages the images won't fade in anymore. Only on the first time. I fixed this by adding a placeholder to the image component, but not this placeholder causes the lazyloading not to work, but instead when I inspect the website it will immediately load all images, even outside the viewport. Anyone has an idea on how to fix that? I do not care about the placeholder, I simply want the image to fade in once it has loaded

5 Replies

kapa.ai•2mo ago

Hi @tierra. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can offer some insights and suggestions regarding your issue with NuxtImg and lazy loading. The loading="lazy" attribute you're using is a native attribute (https://image.nuxt.com/usage/nuxt-img#loading) that provides a hint to the browser on how to handle the loading of an image outside the viewport. However, it seems that this alone isn't solving your issue with images not fading in after page navigation. To address your specific problem, you might want to consider the following approaches: 1. Use the useLoadingIndicator composable: Instead of relying solely on the @load event, you can use the useLoadingIndicator composable to manually handle the loading state. Here's how you could modify your code:

   <template>
     <NuxtImg
       v-if="props.image.asset?._id"
       :src="props.image.asset._id"
       loading="lazy"
       :width="cropWidth"
       :height="cropHeight"
       :sizes="props.sizes"
       quality="80"
       :data-loaded="isLoaded"
       :alt="altText"
       class="opacity-0 transition-opacity duration-400 data-[loaded=true]:(opacity-100)"
       @load="loadedTheResource"
     />
   </template>

   <script lang="ts" setup>
   const loadingIndicator = useLoadingIndicator();
   const isLoaded = ref(false);

   loadingIndicator.isLoading.value = true;

   const loadedTheResource = () => {
     loadingIndicator.isLoading.value = false;
     isLoaded.value = true;
   };
   </script>

   <template>
     <NuxtImg
       v-if="props.image.asset?._id"
       :src="props.image.asset._id"
       loading="lazy"
       :width="cropWidth"
       :height="cropHeight"
       :sizes="props.sizes"
       quality="80"
       :data-loaded="isLoaded"
       :alt="altText"
       class="opacity-0 transition-opacity duration-400 data-[loaded=true]:(opacity-100)"
       @load="loadedTheResource"
     />
   </template>

   <script lang="ts" setup>
   const loadingIndicator = useLoadingIndicator();
   const isLoaded = ref(false);

   loadingIndicator.isLoading.value = true;

   const loadedTheResource = () => {
     loadingIndicator.isLoading.value = false;
     isLoaded.value = true;
   };
   </script>

This approach uses the useLoadingIndicator (https://stackoverflow.com/questions/78070807) composable to manually control the loading state, which might help with the issue of images not fading in after page navigation. 2. Consider using Nuxt hooks: You could use Nuxt hooks to reset the loading state when navigating between pages. For example:

   const nuxtApp = useNuxtApp();
   nuxtApp.hook("page:start", () => {
     isLoaded.value = false;
     loadingIndicator.isLoading.value = true;
   });
   nuxtApp.hook("page:finish", () => {
     // You might want to add a slight delay here to ensure images have time to load
     setTimeout(() => {
       loadingIndicator.isLoading.value = false;
       isLoaded.value = true;
     }, 100);
   });

   const nuxtApp = useNuxtApp();
   nuxtApp.hook("page:start", () => {
     isLoaded.value = false;
     loadingIndicator.isLoading.value = true;
   });
   nuxtApp.hook("page:finish", () => {
     // You might want to add a slight delay here to ensure images have time to load
     setTimeout(() => {
       loadingIndicator.isLoading.value = false;
       isLoaded.value = true;
     }, 100);
   });

This uses the page hooks (https://stackoverflow.com/questions/77541639) to reset the loading state when navigating between pages. 3. Avoid using placeholder: As you've noticed, using a placeholder seems to interfere with the lazy loading behavior. The placeholder prop (https://image.nuxt.com/usage/nuxt-img#placeholder) in NuxtImg is designed to show a placeholder image before the actual image is fully loaded, which might be causing the immediate loading of all images. 4. Consider using events: NuxtImg re-emits native events (https://image.nuxt.com/usage/nuxt-img#events) from the underlying <img> element. You're already using the @load event, which should work. If it's not firing consistently, you might want to double-check if there are any other factors interfering with the event emission. Remember that if you're building a static site or have disabled server-side rendering, you might need to pre-render your images (https://image.nuxt.com/advanced/static-images) for optimal performance. If these suggestions don't resolve your issue, it might be worth checking if there's a potential bug in the Nuxt Image module. In that case, you could consider reporting the issue (https://nuxt.com/docs/community/getting-help#could-there-be-a-bug) to the Nuxt team. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@910553251949195276> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

tierraOP•2mo ago

@kapa.ai this does not help. Your references are about different things

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize for the confusion in my previous response. You're right that the references I provided were not directly related to your specific issue. Let me address your concern more accurately based on the information available in the knowledge sources. After reviewing the provided documents, I must admit that I don't have enough specific information to directly address your issue with NuxtImg, lazy loading, and the onLoad function not firing after page navigation. The knowledge sources don't contain information that precisely matches your scenario. However, I can offer a general suggestion based on Nuxt's behavior: The issue you're experiencing might be related to how Nuxt handles page transitions. By default, Nuxt applies transitions between pages, which could potentially interfere with the image loading behavior you're observing. You might want to investigate if adjusting the page transition settings helps with your issue. You can customize page transitions globally in your nuxt.config.ts file:

export default defineNuxtConfig({
  app: {
    pageTransition: {
      name: 'page',
      mode: 'out-in'
    }
  }
})

export default defineNuxtConfig({
  app: {
    pageTransition: {
      name: 'page',
      mode: 'out-in'
    }
  }
})

Or for a specific page using definePageMeta:

<script setup lang="ts">
definePageMeta({
  pageTransition: {
    name: 'page',
    mode: 'out-in'
  }
})
</script>

<script setup lang="ts">
definePageMeta({
  pageTransition: {
    name: 'page',
    mode: 'out-in'
  }
})
</script>

Source: Nuxt Transitions (https://nuxt.com/docs/getting-started/transitions#global-settings) If this doesn't help solve your specific issue, I recommend reaching out to the Nuxt community forums or creating a GitHub issue with a minimal reproduction of your problem. The behavior you're describing seems unique and might require more in-depth investigation by the Nuxt team or community. I apologize again for not having more specific information to address your problem directly. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@910553251949195276> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

NuxtImg & loading="lazy" load not fired after page route