What is lazy loading for modal gates?
On pages with many modal gates, initializing and loading these gates can slow down your page performance. Lazy loading gates only when a user clicks on a gate link can improve page load speed. This technique requires custom on-page code.
Important Note: This solution only becomes relevant for 20+ modal gates on a page.
How to implement lazy loading for modal gates
Step 1: Add the code snippet
Include this JavaScript code on pages where you want to use lazy loading. These pages must also include the jQuery library:
<script type="application/javascript">
$(document).ready(function(){
$("a[data-gcdc-gate]").click(function(e){
$link = $(this);
if ($link.attr("data-gcdc-gate") !== "" && window.gcdc) {
e.preventDefault();
$link.attr("href", $link.attr("data-gcdc-gate"));
gcdc("loadGates");
window.location = $link.attr("data-gcdc-gate");
$link.attr("data-gcdc-gate", "");
}
});
});
</script>
Step 2: Modify your gate links
For each gate modal link, make these changes:
Move the gate embed code from the 'href' attribute to a custom 'data-gcdc-gate' attribute
Set the 'href' attribute to '#'
Example of a modified link:
<a data-gcdc-gate="#gate-5e38712a-fa91-4d8d-83af-258813acdca8" href="#">click here</a>
This prevents gates from loading when the Formulayt script initializes. When a user clicks the link, the script will inject the relevant gate and open the modal.
This is a beta feature. Please report any issues you experience with this solution.