The Lazy Load Content addon enables the user to defer the loading of assets (such as images, videos, or scripts) until they are needed. Instead of loading all resources when the page initially loads, lazy loading allows the browser to load these resources only when they are about to be displayed on the user's screen, typically as the user scrolls down the page. This approach can significantly improve the initial loading time and overall performance of a webpage, especially for content-heavy sites with numerous images or multimedia elements.
Note: Avoid applying lazy loading to the initial section of your page, as it may impact the performance of your page and increase loading times.
👍🏽 Adding a Lazy Load Content addon
From the Top menu
Select the element you'll attach the addon to
In the top menu, click on Attach addon to element
Search for and select Lazy Load Content
The settings panel will automatically open so you can customize it.
By right-clicking
Right-click the element you want to attach the addon to
Select Addons
Click Add new
Search for and select Lazy Load Content
From the Addon tab
Click the element you want to attach the addon to
Click Addon (next to Style) in the right-side panel
Select an addon
Click Apply addon
Tip: A hourglass icon will appear next to the element in the layers panel indicating that it's been added.
This addon doesn't need to be configured, it'll automatically start loading the elements until they come into view.
⚙️ Configuration options
Shared Presets
You can save the settings of an addon and reuse them as many times as needed in your project, follow the steps below to learn how to save them.
Select the element the addon is attached to
Click the hourglass icon next to the element in the layers panel
Configure the addon
Click on the + icon at the top of the panel
Write the shared style name
Click on the checkmark to save
Click the No shared addon preset dropdown every time you want to reuse your preset, the name you gave it to it will appear in the list.
Tip: Shared presets will only be available for the specific addon you are working with.
Copy-pasting an addon
You can also copy and paste an addon from one element to another but unlike Shared Presets the settings aren't saved and you'll have to copy the addon from the element it's attached to every time you want to reuse it.
Follow the steps below to learn how to do this.
Select the element the addon is attached to
Click the hourglass icon next to the element in the layers panel
Click on the copy-paste icon at the top of the panel
Close the settings panel and select the element into which you want to paste the addon.
Click the copy-paste icon at the top bar
The addon will be added to the element.
Removing a Lazy Load Content addon
Select the element the addon is attached to
Click on the hourglass icon next to the element in the layers panel
In the settings panel, click on the trash icon on the top right corner
The addon has been removed from the element.