Issues with lazy loading
Learn how to fix issues with pages that implement lazy loading
This document explains how Percy handles lazy loading issues when capturing screenshots with the Percy SDK on Percy Web or Percy with Automate project for visual regression testing.
Primary ways to do lazy loading, as per MDN docs and CSS-Tricks.
Main reason why mobile websites use lazy-loading is to save on processing power by not rendering an element before it enters into the mobile viewport.
There are two basic issues observed due to this.
- Asset Capture
- Full page view (Stitching issues)
Asset Capture
Certain assets are only fetched on lazy-loading and if the user does not scroll page till the bottom during the snapshot capture phase, these URLs won’t be captured, hence returning 404 while rendering on Percy infrastructure, as Percy infra cannot resolve it.
Full page view (Stitching issues)
In Percy infrastructure, we render DOM, calculate the height of the page, scroll till the end of the page and take screenshot for each screen scrolled.
When there is no specific width and height given to lazy loaded elements, during scrolling these elements height will change according to DOM.
This cascades other elements to go further down the DOM, and also increases the DOM’s height as well.
Possible Solution
The solution lies in the fact that “lazy loading transformations must be done on the DOM before using snapshot function from Percy SDK”.
You can implement a solution of your preference to get the above job done. Below is one recommended approach which can be used to achieve the same.
Scroll till the end of the DOM before using Percy SDK snapshot function. In this case, DOM would have already replaced the src with value from data-src and also manipulated the classes / attributes accordingly.
The tricky part here is to write a small script that will make sure all lazy loading transformations are done on the DOM before using snapshot function from Percy SDK.
Here’s a code sample for your reference that you can modify as per your language and framework requirements.
When this is implemented properly, both asset capture and full page issues are resolved.
Primary ways to do lazy loading, as per MDN docs and CSS-Tricks.
Main reason why mobile websites use lazy-loading is to save on processing power by not rendering an element before it enters into the mobile viewport.
There are two basic issues observed due to this.
- Asset Capture
- Full page view (Stitching issues)
Asset Capture
Certain assets are only fetched on lazy-loading and if the user does not scroll page till the bottom during the snapshot capture phase, these URLs won’t be captured, hence returning 404 while rendering on Percy infrastructure, as Percy infra cannot resolve it.
Full page view (Stitching issues)
In Percy infrastructure, we render DOM, calculate the height of the page, scroll till the end of the page and take screenshot for each screen scrolled.
When there is no specific width and height given to lazy loaded elements, during scrolling these elements height will change according to DOM.
This cascades other elements to go further down the DOM, and also increases the DOM’s height as well.
Possible Solution
The solution lies in the fact that “lazy loading transformations must be done on the DOM before using snapshot function from Percy SDK”.
You can implement a solution of your preference to get the above job done. Below is one recommended approach which can be used to achieve the same.
Scroll till the end of the DOM before using Percy SDK snapshot function. In this case, DOM would have already replaced the src with value from data-src and also manipulated the classes / attributes accordingly.
The tricky part here is to write a small script that will make sure all lazy loading transformations are done on the DOM before using snapshot function from Percy SDK.
Here’s a code sample for your reference that you can modify as per your language and framework requirements.
When this is implemented properly, both asset capture and full page issues are resolved.
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!