Not working with WP Rocket 3.7 and Elementor 3.0.5
-
Hi
i used it in my website https://www.codehaveli.com/ but it did not work can you please check http://prntscr.com/ue9iu1 and http://prntscr.com/ue9jx3The page I need help with: [log in to see the link]
-
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 4 years ago by florisb.
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.
- The topic ‘Not working with WP Rocket 3.7 and Elementor 3.0.5’ is closed to new replies.