lazyload elementor background images

lazy-elementor-background-images.php

<?php

// NEWS!!! NEWS!!! **** FEBRUARY 2020 //
// I rolled this code into a plugin!
// Download plugin Lazy Load Background Images for Elementor. Link is in comments below.
// Or go to https://james.revillini.com/projects/

// if you don't want another plugin, the code below works (last time I checked)



// this code is pretty rough ... I'm happy to take suggestions to rewrite and make it better
// you should be able to add this to functions.php ... personally I use the Code Snippets plugin
// tested with and without caching implemented and cloudflare DNS
// DO NOT USE IN PRODUCTION ENVIRONMENT

// NEW 2020-02-08 ... now lazyloads column backgrounds!!! feedback welcome!!!

// lazyload all background images used in elementor sections AND columns

// add lazy class to all elementor sections and columns

// @TODO figure out why this is not an add_filter situation
add_action( 'elementor/frontend/the_content', function( $content ) {
	return preg_replace( ['/(\selementor-section\s)/m', '/(elementor-column-wrap)/m'], ' $1 lazyelementorbackgroundimages ', $content );  
} );

// add css to hide bg image on images with lazyelementorbackgroundimages class
// add js (jQuery and Waypoint are dependencies) to remove the lazyelementorbackgroundimages class as the item approaches the viewport
add_action( 'wp_enqueue_scripts', 'lazy_elementor_background_images_js', 999 );
function lazy_elementor_background_images_js () { 
	if ( is_admin() ) return;
	if ( ! ( is_singular() ) ) return;
	
	global $lazy_elementor_background_images_js_added;
	ob_start(); ?>
	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
			$('.elementor-section.lazyelementorbackgroundimages,.elementor-column-wrap.lazyelementorbackgroundimages').removeClass('lazyelementorbackgroundimages');
			if ( window.console && console.warn ) {
				console.warn( 'Waypoint library is not loaded so backgrounds lazy loading is turned OFF' );
			}
			return;
		} 
		$('.lazyelementorbackgroundimages').each( function () {
			var $section = $( this );
			new Waypoint({
				element: $section.get( 0 ),
				handler: function( direction ) {
					//console.log( [ 'waypoint hit', $section.get( 0 ), $(window).scrollTop(), $section.offset() ] );
					$section.removeClass('lazyelementorbackgroundimages');
				},
				offset: $(window).height()*1.5 // when item is within 1.5x the viewport size, start loading it
			});
		} );
	});
<?php
	$skrip = ob_get_clean();
	
   	if ( ! wp_script_is( 'jquery', 'enqueued' ) ) {
		wp_enqueue_script( 'jquery' );
	}
   											 
	$lazy_elementor_background_images_js_added = wp_add_inline_script( 'jquery', $skrip );
}


add_action( 'wp_head', 'lazy_elementor_background_images_css' );
function lazy_elementor_background_images_css () { 
	if ( is_admin() ) return;
	if ( ! ( is_singular() ) ) return;
	global $lazy_elementor_background_images_js_added;
	if ( ! ( $lazy_elementor_background_images_js_added ) ) return; // don't add css if scripts weren't added
	ob_start(); ?>
		<style>
			.lazyelementorbackgroundimages:not(.elementor-motion-effects-element-type-background) {
				background-image: none !important; /* lazyload fix for elementor */
			}
		</style>
<?php
	echo ob_get_clean();
}

@Tygovanommen can this code work for elementor image gallery?
i have element like this :
<div class="e-gallery-image elementor-gallery-item__image" data-thumbnail="../uploads/2021/11/L01.png" data-width="450" data-height="450" alt="" style="background-image: url("../uploads/2021/11/L01.png");"></div>

@masoudnkh adjust function filter_the_content from:
return preg_replace(['/elementor-section /', '/elementor-column /'], '$0 lazyelementorbackgroundimages ', $content);
to
return preg_replace(['/elementor-section /', '/elementor-column /', '/e-gallery-image /'], '$0 lazyelementorbackgroundimages ', $content);
I haven't tested it

@Tygovanommen Thanks, i will test and review result to you

Edit of @Tygovanommen code to exclude the first section and improve web vitals:

function filter_the_content($content){
  $content = preg_replace(['/elementor-section /', '/elementor-column /', '/e-gallery-image /'], '$0 lazyelementorbackgroundimages ', $content);
  $pos = strpos($content, 'lazyelementorbackgroundimages');
  if ($pos !== false) { $content = substr_replace($content, '', $pos, strlen('lazyelementorbackgroundimages')); }
  return $content;
}

Ran into an issue where inline css was broken due to the "lazyelementorbackgroundimages" class being injected into the class definitions. Also included an update so that the first section will be excluded and the waypoint logic will not kick off until there's some sort of user interaction (this is for images that are just below the fold but would still trigger the lazy load to fire).

`
add_action('elementor/frontend/the_content', 'filter_the_content');
function filter_the_content($content)
{
//return $content;
return preg_replace(['/"elementor-section /', '/"elementor-column /', '/"elementor-background-overlay /', '/"elementor-background-overlay/'], '$0 lazyelementorbackgroundimages ', $content);
}

add_action('wp_head', 'lazy_load_background_images', 999);
function lazy_load_background_images()
{
if (is_admin()) return;
?>
<script>
jQuery(function ($) {

            if (!(window.Waypoint)) {
              $('.elementor-section.lazyelementorbackgroundimages,.elementor-column .lazyelementorbackgroundimages').removeClass('lazyelementorbackgroundimages');
              return;
            }

            function fireUserIntScripts(){

                // Lazy load images
                $('.lazyelementorbackgroundimages').each(function () {
                  const section = $(this);
                  new Waypoint({
                    element: section.get(0),
                    handler: function () {
                      section.removeClass('lazyelementorbackgroundimages');
                    },
                    offset: $(window).height() * 1.5
                  });
                });

                document.removeEventListener('mousedown', fireUserIntScripts);
                document.removeEventListener('mousemove', fireUserIntScripts);
                document.removeEventListener('touchstart', fireUserIntScripts);
                document.removeEventListener('scroll', fireUserIntScripts);
                document.removeEventListener('keydown', fireUserIntScripts);    

            }

            


            document.addEventListener('mousedown', fireUserIntScripts);
            document.addEventListener('mousemove', fireUserIntScripts);
            document.addEventListener('touchstart', fireUserIntScripts);
            document.addEventListener('scroll', fireUserIntScripts);
            document.addEventListener('keydown', fireUserIntScripts);



          });
        </script>
        <style>
            .lazyelementorbackgroundimages:not(.elementor-section:first-of-type), .lazyelementorbackgroundimages .elementor-widget-wrap {
                background-image: none !important;
            }
        </style>
        <?php

}
`