I’m currently working on a project using Prismic CMS and SvelteKit. I’ve been trying to implement lazy loading for images using the loading='lazy' attribute on the <img> tag. However, it doesn’t seem to be working as expected. The images aren’t being lazy loaded and I’m not sure why. Has anyone else encountered this issue or have any suggestions for resolving it? Any help would be greatly appreciated.
Here is a sample link: https://ao-website-six.vercel.app/work-details/test-image
Each image has a loading lazy attribute but if you look through the network attribute all are downloaded at the page load.
@piyush.bansal.design Are you testing this in Chrome? I think Chrome can be over-eager in loading images. I tested your site in Firefox, and the last two images on the page didn't load until I scrolled.
1 Like
Hi Sam!
Thank you for your prompt response. I am indeed testing the page on Chrome, and I am unsure if it's fetching the images too eagerly. I tested it on a page with 20 images, and it fetched everything on the page load. You are absolutely correct in pointing out that it works on Firefox. It's quite a strange behaviour. I think I'll write a proper intersection observer.
Thank you so much for your time and response.
Link to the website
1 Like