Modifying elements that are lazy loaded


There are times in sites where the parts of the web page that is not in view, does not load when the initial page loads. They will load until the visitor scrolls to that part of the page. Convert Experiments will deploy variation changes when the page loads, however it will not deploy those changes afterwards by default.


To fix this, we need to trigger the variation changes again every time the user scrolls the page. So, first you can create your changes with the visual editor or code them on the Code Editor.

In the example provided we are going to assume the following code has been added to the experiment, and found in the Variation Code Editor:


We will have to wrap the code around a scroll event so it is triggered every time the page is scrolled by the visitor and placed in the Variation Custom JS Editor.

You will also need to modify the code lines to use the convert.$() library instead of the convert._$(), since we do not need the Convert SmartInsert technology that is required when the page loads.

Here is the code:

See the Pen Lazy Load Custom JS by (@gcrewe) on CodePen.

Now, the code will be triggered every time a visitor scrolls the page, and the newly shown elements will be changed according to what you have edited in the Visual Editor or by hand in the Code Editor.

keyword: "lazy load", "appear when scrolling"

Need assistance? Start a conversation with our Support Team.

Reliably Convert More Site Visitors, Even If Everything Else is Changing in Your Business.

✓ No Credit Card  ✓ Easy Set-Up  ✓ Access All Features