Support » Plugin: Lazy Load Elementor Background Images » Not working with WP Rocket 3.7 and Elementor 3.0.5

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author James Revillini

    (@jrevillini)

    Sorry I was not able to respond sooner. I will look into this and get back to you.

    @codehaveli If you need a temporary fix, add following snippet to functions.php or via the code snippets plugin (https://nl.wordpress.org/plugins/code-snippets/) and add the class ‘lazy-bg’ to the sections and columns you need to have lazyloaded background images on, I whipped this up today because a client needed it.

    
    add_action( 'elementor/frontend/the_content', function($content) {
        return preg_replace( [
            '/(lazy-bg)/m',
        ], ' $1 lazyelementorbackgroundimages ', $content );
    } );
    
    // inline scripts via wp_add_inline_script()
    add_action('wp_enqueue_scripts', function() {
    
        $script = "jQuery( function ( $ ) {
                if ( ! ( window.Waypoint ) ) {
                    // if Waypoint is not available, then we MUST remove our class from all elements because otherwise BGs will never show
                    $('.lazyelementorbackgroundimages').removeClass('lazyelementorbackgroundimages');
                    if ( window.console && console.warn ) {
                        console.warn( 'Waypoint library is not loaded so backgrounds lazy loading is turned OFF' );
                    }
                    return;
                } 
                var lazyelementorbackgroundimages_checkup = function () {
                    $('.lazyelementorbackgroundimages').each( function () {
                        var \$element = $( this );
                        new Waypoint({
                            element: \$element.get( 0 ),
                            handler: function( direction ) {
                                //console.log( [ 'waypoint hit', \$element.get( 0 ), $(window).scrollTop(), \$element.offset() ] );
                                \$element.removeClass('lazyelementorbackgroundimages');
                            },
                            offset: $(window).height()*1.5 // when item is within 1.5x the viewport size, start loading it
                        });
                    } );
                };
                lazyelementorbackgroundimages_checkup();
                
                // also run an extra check after a swiper is in the viewport
                $('.swiper-container').each( function () {
                    var \$element = $( this );
                    new Waypoint({
                        element: \$element.get( 0 ),
                        handler: function () {
                            \$element.find('.lazyelementorbackgroundimages').removeClass('lazyelementorbackgroundimages');
                        },
                        offset: $(window).height()*1.5 // when item is within 1.5x the viewport size, start loading it
                    });
                } );
            });";
    
        wp_add_inline_script('jquery', $script);
    
    });
    
    add_action('wp_head', 'my_custom_styles', 100);
    
    function my_custom_styles()
    {
        echo "<style>
                    .lazyelementorbackgroundimages:not(.elementor-motion-effects-element-type-background) {
                        background-image: none !important; /* lazyload fix for elementor */
                    }
    
                    .lazyelementorbackgroundimages:not(.elementor-motion-effects-element-type-background) .elementor-column-wrap {
                        background-image: none !important; /* lazyload fix for elementor */
                    }
                </style>";
    }
    
    • This reply was modified 7 months, 3 weeks ago by florisb.
    Plugin Author James Revillini

    (@jrevillini)

    WHOA! Thanks so much for posting this! I’ve been a little busy lately. I’ll get this rolled into the core plugin soon.

    @jrevillini You’re welcome! You should probably enqueue the CSS in a neater manner though, I was in a bit of a hurry when writing this 🙂

    Problem seemed to be that Elementor changed its div structure a bit (at least for columns) and that the JS didn’t get added somehow, which might have to do with jquery migrate being removed by latest WP-Rocket versions, didn’t look further into it because of shortage of time.

    • This reply was modified 7 months, 3 weeks ago by florisb.
    • This reply was modified 7 months, 3 weeks ago by florisb.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Not working with WP Rocket 3.7 and Elementor 3.0.5’ is closed to new replies.