Support » Plugin: Lazy Load Elementor Background Images » Now working on my site

  • For some reason my site is not working with your plugin. I really want to lazyload images for Elementor. https://mandalayfl.com/ is the url. You can see that it is not lazyloading. https://gtmetrix.com/reports/mandalayfl.com/OSGMXS2n. Resources are being added. I went through the checklist, this is Elementor, Astra theme, everything updated to latest. Its loading the waypoints apparently too. I have tried deactivating the SG Cache and Autoptize and it didn’t make a difference.

    The page I need help with: [log in to see the link]

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

    (@jrevillini)

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

    @zc-web 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>";
    }
    
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Now working on my site’ is closed to new replies.