Loading Lazy Images in BackstopJS
Yes, I know, that there exists native lazy loading in modern browsers. But one thing, browsers do not support natively yet (and maybe never will), is "auto sizes". That's why I like to use the JavaScript package lazysizes in some projects, and this feature relies on JavaScript lazy loading.
It works really fine for me, except all images always were missing in my visual regression tests. In most cases, this
may not be a problem at all. With proper width and height attributes, the spaces for the images are calculated
correctly and the layout is correct and reproducible, even if no images are shown.
But if you have styles applied to images, it may be useful to trigger image loading, before the visual regression comparison is done.
I could solve this for my needs, with a simple modification of puppet/onReady.js:
await page.evaluate(() => {
document.querySelectorAll('img.lazyload').forEach((element) => {
lazySizes.loader.unveil(element)
})
})This tiny snippet simply finds all elements that match the selector img.lazyload and then uses lazysizes'
JavaScript API to unveil each
of the found elements.