Lazy loading is a common feature used by many web applications to delay the loading of content and images until they are requested.If your web application uses lazy load and a page is not captured in the right state or time, snapshots in Replay might appear to be broken or display incorrectly.

Tealeaf addresses issues with lazy load by detecting the occurrence of a css selector. The css selector can be a spinner or loading icon that identifies the point in time that the snapshot is ready to be taken.

<img src="loading.png" id="spinner"/>

Tealeaf can capture the DOM either before or after the dynamic content loads. Usually when the css selector disappears, the dynamic content is fully loaded and ready for snapshot, as shown in figure C.

Fully loading snapshot

To capture lazy loading content, you must configure the triggers section in the SDK by defining the events that are triggered by the css selector appearing or disappearing from the DOM. The following sample configuration shows a delayUntil condition on a load event.

triggers: [
    {
        event: "load",
        delayUntil: {
            selector: "#spinner",
            exists: false
        }
    }
]

The condition instructs the SDK to capture the DOM only when the css selector (“#spinner”) disappears. The exists property is only used for taking a single snapshot, either when the selector appears or disappears.

To limit lazy load DOM captures on specific urls, provide your own logic.

if (urlA || urlB) {
    config.modules.replay.domCapture.triggers = {
    };
}

Similarly, Tealeaf can add a delayUntil condition for the click and change events. For example, when a user clicks a button or selects an item from a dropdown.

triggers: [
    {
        event: "change",
        delayUntil: {
            selector: "#spinner",
            exists: false
        }
    }

To limit lazy load DOM captures on a specific dropdown, use the targets property.

triggers: [
    {
        event: "change",
        targets: ["select.car"],
        delayUntil: {
            selector: "#spinner",
            exists: false
        }
    },
    {
        event: "change"
    }
]

The following table shows configuration properties that are used by lazy load.

Property Description
event Event for triggering DOM capture
delayUntil Condition used to instruct SDK to wait until a specific css selector occur then takes snapshot.
selector Css selector to observe for.
exists Boolean. Default is true. If true, triggers capture when the css selector appears. If false, triggers capture when the selector disappears
targets List of html targets that can trigger capture.

Join The Discussion

Your email address will not be published. Required fields are marked *