THIS ARTICLE WILL HELP YOU:
Issue
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.
Solution
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:
convert._$('.grid-product__tag').parent().parent().remove();
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:
window.convert.$( document ).scroll(function() {
window.convert.$('.grid-product__tag').parent().parent().remove();
});
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"