{"id":13416,"date":"2024-09-07T15:15:14","date_gmt":"2024-09-07T15:15:14","guid":{"rendered":"https:\/\/wpfreelancer.dev\/?p=13416"},"modified":"2024-11-07T15:18:15","modified_gmt":"2024-11-07T15:18:15","slug":"lazyload-elementen-plugin","status":"publish","type":"post","link":"https:\/\/wpfreelancer.dev\/nl\/blog\/lazyload-elementen-plugin","title":{"rendered":"Lazyload Elementen Plugin"},"content":{"rendered":"\n<p>This&nbsp;<strong>Lazyload Elements<\/strong>&nbsp;plugin allows you to improve your website&#8217;s performance by lazy loading specific sections or elements. To use this feature, simply add the CSS class&nbsp;<code>lazy-section<\/code>&nbsp;to any section or element. For dynamic content generated by shortcodes, use the&nbsp;<code>data-lazy-shortcode<\/code>&nbsp;attribute.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Use<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><ol><li><strong>Edit Your Page, for example with Elementor:<\/strong><ul><li>Navigate to the page you want to edit in your WordPress dashboard.<\/li><li>Click on\u00a0<strong>Edit with Elementor<\/strong>\u00a0to open the Elementor editor.<\/li><\/ul><\/li><li><strong>Static Content:<\/strong><ul><li><strong>Select the Section or Element:<\/strong><ul><li>Click on the section or element you wish to lazy load.<\/li><\/ul><\/li><li><strong>Add the CSS Class:<\/strong><ul><li>In the Elementor panel, go to the\u00a0<strong>Advanced<\/strong>\u00a0tab.<\/li><li>Locate the\u00a0<strong>CSS Classes<\/strong>\u00a0field.<\/li><li>Enter the class name\u00a0<code>lazy-section<\/code>.<\/li><\/ul><\/li><\/ul><\/li><li><strong>Dynamic Content (Shortcodes):<\/strong><ul><li><strong>Create a Section:<\/strong><ul><li>Add a new section in Elementor where you want the dynamic content to appear.<\/li><\/ul><\/li><li><strong>Add HTML Widget:<\/strong><ul><li>Add an HTML widget to the section.<\/li><\/ul><\/li><li><strong>Add Lazy Load HTML:<\/strong><ul><li>In the HTML widget, add the following code, replacing\u00a0<code>[your-shortcode]<\/code>\u00a0with your actual shortcode:<\/li><\/ul><code>&lt;div\u00a0class=\"lazy-section\"\u00a0data-lazy-shortcode='[your-shortcode]'>&lt;\/div><\/code><\/li><\/ul><\/li><li><strong>YouTube Videos:<\/strong><ul><li>For YouTube videos added via the Elementor video module, the plugin will automatically convert the\u00a0<code>src<\/code>\u00a0attribute to\u00a0<code>data-src<\/code>.<\/li><li>Add the\u00a0<code>lazy-section<\/code>\u00a0class to the section containing the video.<\/li><\/ul><\/li><li><strong>Save and Preview:<\/strong><ul><li>Save your changes.<\/li><li>Preview the page to ensure that the lazy loading effect is working as expected.<\/li><\/ul><\/li><\/ol>ExamplesExample 1: Lazy Loading an Image Section<ol><li><strong>Edit the Section:<\/strong><ul><li>Click on the image section in Elementor.<\/li><\/ul><\/li><li><strong>Add the CSS Class:<\/strong><ul><li>Go to the\u00a0<strong>Advanced<\/strong>\u00a0tab.<\/li><li>In the\u00a0<strong>CSS Classes<\/strong>\u00a0field, add\u00a0<code>lazy-section<\/code>.<\/li><\/ul><\/li><li><strong>Save and Preview:<\/strong><ul><li>Save your changes and preview the page.<\/li><li>The image will now load only when it comes into the viewport.<\/li><\/ul><\/li><\/ol>Example 2: Lazy Loading an Instagram Feed<ol><li><strong>Create a Section:<\/strong><ul><li>Add a new section in Elementor.<\/li><\/ul><\/li><li><strong>Add HTML Widget:<\/strong><ul><li>Add an HTML widget to the section.<\/li><\/ul><\/li><li><strong>Add Lazy Load HTML:<\/strong><ul><li>In the HTML widget, add the following code:<\/li><\/ul><code>&lt;div\u00a0class=\"lazy-section\"\u00a0data-lazy-shortcode='[instagram-feed]'>&lt;\/div><\/code><\/li><li><strong>Save and Preview:<\/strong><ul><li>Save your changes and preview the page.<\/li><li>The Instagram feed will load only when the section comes into the viewport.<\/li><\/ul><\/li><\/ol>Example 3: Lazy Loading a YouTube Video\n<ol class=\"wp-block-list\">\n<li><strong>Edit the Section:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Click on the section containing the YouTube video in Elementor.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Add the CSS Class:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Go to the\u00a0<strong>Advanced<\/strong>\u00a0tab.<\/li>\n\n\n\n<li>In the\u00a0<strong>CSS Classes<\/strong>\u00a0field, add\u00a0<code>lazy-section<\/code>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Save and Preview:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Save your changes and preview the page.<\/li>\n\n\n\n<li>The YouTube video will load only when the section comes into the viewport or when the user interacts with the placeholder.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Additional Information<\/h3>\n\n\n\n<p><strong>Lazyload Elements<\/strong>&nbsp;uses modern JavaScript techniques, including the Intersection Observer API, to detect when elements are in the viewport. For browsers that do not support Intersection Observer, a fallback ensures that the elements are still loaded properly.<\/p>\n\n\n\n<p>This plugin requires no additional configuration. Simply add the&nbsp;<code>lazy-section<\/code>&nbsp;class to any Elementor section or element, and the plugin handles the rest.<br><br>Here you can&nbsp;<a href=\"https:\/\/wpfreelancer.dev\/wp-content\/uploads\/2024\/10\/original-lazyload-elements.zip\">download the plugin<\/a>.<\/p>\n\n\n\n<p>For more detailed information and examples contact me at hello@wpfreelancer.dev<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img alt=\"\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/wpfreelancer.dev\/wp-content\/uploads\/2024\/06\/wordpress-speculative-loadi-738-1024x538.webp\" alt=\"\" class=\"wp-image-13240\" srcset=\"https:\/\/wpfreelancer.dev\/wp-content\/uploads\/2024\/06\/wordpress-speculative-loadi-738-1024x538.webp 1024w, https:\/\/wpfreelancer.dev\/wp-content\/uploads\/2024\/06\/wordpress-speculative-loadi-738-300x158.webp 300w, https:\/\/wpfreelancer.dev\/wp-content\/uploads\/2024\/06\/wordpress-speculative-loadi-738-768x403.webp 768w, https:\/\/wpfreelancer.dev\/wp-content\/uploads\/2024\/06\/wordpress-speculative-loadi-738-1536x806.webp 1536w, https:\/\/wpfreelancer.dev\/wp-content\/uploads\/2024\/06\/wordpress-speculative-loadi-738.webp 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>This&nbsp;Lazyload Elements&nbsp;plugin allows you to improve your website&#8217;s performance by lazy loading specific sections or elements. To use this feature, simply add the CSS class&nbsp;lazy-section&nbsp;to any section or element. For dynamic content generated by shortcodes, use the&nbsp;data-lazy-shortcode&nbsp;attribute. How to Use Additional Information Lazyload Elements&nbsp;uses modern JavaScript techniques, including the Intersection Observer API, to detect when [&hellip;]<\/p>\n","protected":false},"author":22087,"featured_media":13240,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_breakdance_hide_in_design_set":false,"_breakdance_tags":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-13416","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-geen-categorie"],"_links":{"self":[{"href":"https:\/\/wpfreelancer.dev\/nl\/wp-json\/wp\/v2\/posts\/13416","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpfreelancer.dev\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpfreelancer.dev\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpfreelancer.dev\/nl\/wp-json\/wp\/v2\/users\/22087"}],"replies":[{"embeddable":true,"href":"https:\/\/wpfreelancer.dev\/nl\/wp-json\/wp\/v2\/comments?post=13416"}],"version-history":[{"count":0,"href":"https:\/\/wpfreelancer.dev\/nl\/wp-json\/wp\/v2\/posts\/13416\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpfreelancer.dev\/nl\/wp-json\/wp\/v2\/media\/13240"}],"wp:attachment":[{"href":"https:\/\/wpfreelancer.dev\/nl\/wp-json\/wp\/v2\/media?parent=13416"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpfreelancer.dev\/nl\/wp-json\/wp\/v2\/categories?post=13416"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpfreelancer.dev\/nl\/wp-json\/wp\/v2\/tags?post=13416"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}