Lazy HTML Render for Elementor

elementor-html-lazy-render.php

<?php
function add_lazy_render_to_elementor_sections($element, $section_id, $args)
{
    if (in_array($element->get_name(), ['section', 'container'])) {
        if (!$element->get_controls('hiroman_lazy_render')) {
            $element->start_controls_section('flying_press', [
                'tab' => \Elementor\Controls_Manager::TAB_ADVANCED,
                'label' => esc_html__('Lazy Render HTML', 'hiroman'),
            ]);

            $element->add_control('hiroman_lazy_render', [
                'label' => esc_html__('Lazy Render', 'hiroman'),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'description' => "Render elements only when they are about to enter the viewport",
                'label_on' => esc_html__('Yes', 'hiroman'),
                'label_off' => esc_html__('No', 'hiroman'),
                'return_value' => 'yes',
                'default' => 'no',
            ]);

            $element->end_controls_section();
        }
    }
}
add_action('elementor/element/after_section_end', 'add_lazy_render_to_elementor_sections', 99, 3);
function inject_lazy_render_script_in_footer() {
    // Đường dẫn tệp script
    $script_url = get_stylesheet_directory_uri() . '/optimize-functions/html-lazy-render/assets/js/lazyrender.min.js';
    
    // Chèn script vào footer
    echo '<script src="' . $script_url . '" defer></script>';
}
add_action('wp_footer', 'inject_lazy_render_script_in_footer', 20);



function lazy_render_before($element)
{
    if (!in_array($element->get_name(), ['section', 'container'])) {
        return;
    }

    if ($element->get_settings('hiroman_lazy_render') === 'yes') {
        // Tạo div bao quanh phần tử với data attribute để lazy render
        echo '<div data-hiroman-lazy-render style="height:1000px; width:100%;">';
        echo '<noscript>';
        ob_start(); // Bắt đầu lưu HTML nội dung
    }
}
add_action('elementor/frontend/before_render', 'lazy_render_before', 5);


function lazy_render_after($element)
{
    if (!in_array($element->get_name(), ['section', 'container'])) {
        return;
    }

    if ($element->get_settings('hiroman_lazy_render') === 'yes') {
        echo ob_get_clean() . '</noscript></div>';
    }
}
add_action('elementor/frontend/after_render', 'lazy_render_after', 99);