Broken lazy loading images

Issues emerging from broken lazy-loading images in the visual testing process.

If you are using a custom lazy image loading library, you may need to scroll the page before taking a Percy snapshot. Libraries like lozad.js or lazyload delay setting the <img>’s src attribute until the page is scrolled near the image. Once the page scroll intersects with the image, the library applies the src with the correct image.

For snapshots to render correctly, the page needs to be scrolled before a Percy snapshot is captured. Percy does not automatically scroll the page for you. If images are not rendering correctly in your snapshots, it’s likely the page did not scroll past the image (and did not trigger the intersection observer).

You can read more about lazy loading images, Percy, and examples here.

Reference Topic

• Percy Common - FAQs