On pages where you have a large number of modal gates, initialising and loading these gate can have a performance impact on your page. In this instance, it may be preferable to lazy load gates only when the user clicks on the relevant gate link. This can be achieved with some custom on-page code. Follow these steps:
1 - Include the following code snippet on pages where you want to utilise 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>
2 - For each gate modal link, modify the link in the following way. Instead of including the gate embed code within the 'href' attribute of the link, add it to a custom data attribute called 'data-gcdc-gate', and set the 'href' to '#', e.g.:
<a data-gcdc-gate="#gate-5e38712a-fa91-4d8d-83af-258813acdca8" href="#">click here</a>
This will prevent the gate from loading when the Formulayt script initialises. Instead, when the user clicks the link, the above script will be triggered, which will inject the relevant gate and then open the gate modal.
Please note that this is a beta feature. Please report any issues you experience using this solution.