Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
lazyload elementor background images
<?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();
}
@jrevillini

This comment has been minimized.

Copy link
Owner Author

@jrevillini jrevillini commented Jul 18, 2019

I need help making this better. I'd be happy to roll it into a plugin to make installation super easy but I want to work with other developers to make the code solid and get some test results from people.

@madbradj

This comment has been minimized.

Copy link

@madbradj madbradj commented Aug 21, 2019

I would love to test this out. Have you thought about looking at the groups on facebook to see if there are any devs who would be interested in helping you get this out? I am not a developer myself, or I would be on top of this!

@madbradj

This comment has been minimized.

Copy link

@madbradj madbradj commented Aug 21, 2019

I added this as a code snippet and it reduced load time by 4 seconds... Using Rocket Lazy Load. Thanks for this!

@madbradj

This comment has been minimized.

Copy link

@madbradj madbradj commented Aug 21, 2019

I added this as a code snippet and it reduced load time by 4 seconds... Using Rocket Lazy Load. Thanks for this!

Scratch that.... BG Images not loading at all now. Will keep following this thread and I am ready to test whenever you make changes.

@jrevillini

This comment has been minimized.

Copy link
Owner Author

@jrevillini jrevillini commented Aug 21, 2019

Scratch that.... BG Images not loading at all now.

just to confirm ... if you remove this code then your backgrounds do load, right? just want to make sure that it's not a conflict with some other setting on your site.

i'm going to rewrite this in a minute because I learned a better way to do the inline scripting ... give me a few mins

@jrevillini

This comment has been minimized.

Copy link
Owner Author

@jrevillini jrevillini commented Aug 21, 2019

@madbradj try this code. I think it's a big improvement over the last and it's working great on the site that I tested on.

@madbradj

This comment has been minimized.

Copy link

@madbradj madbradj commented Aug 22, 2019

@madbradj try this code. I think it's a big improvement over the last and it's working great on the site that I tested on.

I updated the code, BG images still a problem for me. But Let me do some testing before anything else. Will confirm later.

@jrevillini

This comment has been minimized.

Copy link
Owner Author

@jrevillini jrevillini commented Aug 22, 2019

ok, if it's not a conflict with another plugin or your configuration then maybe you sent the backgrounds on columns instead of rows. my code doesn't handle that situation yet but I didn't think it would blank out all the backgrounds. Can you create a new page, add 1 row with a spacer that's like 4000px tell, then add a row below that and set a background on the row itself and see if it works?

i'd love to make this work for everyone.

incidentally, another option that may work for you is to inline all styles. There is a setting under Elementor>Settings and you can now choose to inline all styles instead of using an external stylesheet. I haven't tested it but if my hunch is correct, it would allow WP Rocket to lazy load the background images and you wouldn't even need this hack. Again, I haven't tried it, but it's probably preferable. I don't know what the advantage to using an external stylesheet is when all the styles in it are page-specific.

@newbie7777

This comment has been minimized.

Copy link

@newbie7777 newbie7777 commented Sep 14, 2019

Hi, how do I add this script? functions.php, wc-template-functions.php?
Thanks in advance. :)

@jrevillini

This comment has been minimized.

Copy link
Owner Author

@jrevillini jrevillini commented Oct 3, 2019

Hi, how do I add this script? functions.php, wc-template-functions.php?
Thanks in advance. :)

see the initial comments in the code for those instructions :)

@Deralict

This comment has been minimized.

Copy link

@Deralict Deralict commented Oct 18, 2019

This would be so valuable as a non-configurable plugin (meaning it just works without needing to be configured). I added it to the end of my functions.php, but it clobbered the entire site so had to remove it. Still looking for a way to use wp-rocket lazyloading with background images... :(
If you can help me get it to work I'd be glad to help you test it in case you plan to make it a plugin in the future.

@jrevillini

This comment has been minimized.

Copy link
Owner Author

@jrevillini jrevillini commented Nov 6, 2019

I added it to the end of my functions.php, but it clobbered the entire site so had to remove it.

Maybe you copied the opening <?php line into functions.php ... if you're pasting into functions.php, you don't want that line as it signifies the beginning of a PHP code block and you're just adding more PHP code to an existing block.

Alternately, you can install the Code Snippets plugin (which is what I did) https://wordpress.org/plugins/code-snippets/, then create a new snippet and copy and paste the code in. Again, you won't need the opening line <?php ... Code Snippets already puts it in for you. Before saving, mark the snippet to run on the front end only.

@whoifnot

This comment has been minimized.

Copy link

@whoifnot whoifnot commented Nov 17, 2019

Hi jrevillini, just as a comment, this method works :) (it lazy-loads the background images), but it messes up the functions of other optimizers like autoptimize. It not only changes the the background images behaviour, but also somehow stops the url replace in the rest of the pictures.

Hope at some point the Elementor team work on this topic.

@jrevillini

This comment has been minimized.

Copy link
Owner Author

@jrevillini jrevillini commented Nov 18, 2019

Hi jrevillini, just as a comment, this method works :) (it lazy-loads the background images), but it messes up the functions of other optimizers like autoptimize. It not only changes the the background images behaviour, but also somehow stops the url replace in the rest of the pictures.

Thanks for your comments!
It's odd, it was not my experience that this code broke lazyloading in other places. First, I didn't think autoptimize did any image replacement. The features of autoptimize I'm familiar with have to do with css/html/js minification and caching. I don't know how this code would have any effect on those features.

In my testing, I was using WP Rocket and it continued to lazyload all normal image resources.

@sermalefico

This comment has been minimized.

Copy link

@sermalefico sermalefico commented Nov 29, 2019

This code rocks! increase my speed a lot. do you tell this to elmentor github?

@lbraida

This comment has been minimized.

Copy link

@lbraida lbraida commented Dec 4, 2019

hey I tried this code and the background images of my sections disappeared, also are you working on a solution for column backgrounds?

@sermalefico

This comment has been minimized.

Copy link

@sermalefico sermalefico commented Dec 5, 2019

I use this in conjuntion with Lazy loader plugin (lazysizes) and put in my sections a .lazyload class y elementor advanced options section. I exclude jquery from minify. This improve me 1s in google speed test

@lbraida

This comment has been minimized.

Copy link

@lbraida lbraida commented Dec 5, 2019

@lbraida

This comment has been minimized.

Copy link

@lbraida lbraida commented Dec 5, 2019

@jrevillini

This comment has been minimized.

Copy link
Owner Author

@jrevillini jrevillini commented Dec 5, 2019

This code rocks! increase my speed a lot. do you tell this to elmentor github?

Sort of - I linked to this gist from one of their github support threads about this issue.

@jrevillini

This comment has been minimized.

Copy link
Owner Author

@jrevillini jrevillini commented Dec 5, 2019

hey I tried this code and the background images of my sections disappeared, also are you working on a solution for column backgrounds?

Sure, I can try to get it working for column backgrounds as well. I'll post again when ready.

@jrevillini

This comment has been minimized.

Copy link
Owner Author

@jrevillini jrevillini commented Dec 5, 2019

I use this in conjuntion with Lazy loader plugin (lazysizes) and put in my sections a .lazyload class y elementor advanced options section. I exclude jquery from minify. This improve me 1s in google speed test

good to know! Good point about jQuery. I need to rewrite this so it injects inline code but uses jquery as a dependency so minification will load things in the right order.

@Jordidriesen

This comment has been minimized.

Copy link

@Jordidriesen Jordidriesen commented Dec 12, 2019

I just tested it on a live site, with wp rocket and cloudflare and it seems to work. Will be following the progress since it's a must have for elementor to perform better in psi and real life.

@slamdive

This comment has been minimized.

Copy link

@slamdive slamdive commented Jan 27, 2020

Requires <script type="text/javascript"> adding before the jQuery code when including in functions.php
Results however seem to be a little random, sometimes it seems to work and other times it just doesn't.

@jrevillini

This comment has been minimized.

Copy link
Owner Author

@jrevillini jrevillini commented Jan 28, 2020

Requires <script type="text/javascript"> adding before the jQuery code when including in functions.php

It shouldn't be required since it uses wp_add_inline_script which adds the script tags. But hey, if it's working for you then go with it!

Results however seem to be a little random, sometimes it seems to work and other times it just doesn't.

If you can give me an example of working/not working then maybe I can improve the script to it always works.

@slamdive

This comment has been minimized.

Copy link

@slamdive slamdive commented Jan 28, 2020

Thanks! I've been playing around and it seems to be working well now. ;-)
Looks like the areas I was having issues with were in fact column backgrounds.

@jrevillini

This comment has been minimized.

Copy link
Owner Author

@jrevillini jrevillini commented Feb 9, 2020

Hey boys ... guess what ...

LATEST VERSION LAZY LOADS COLUMN BACKGROUNDS! 🔥🔥🔥

Send feedback!

@jrevillini

This comment has been minimized.

Copy link
Owner Author

@jrevillini jrevillini commented Feb 10, 2020

I rolled this into a plugin https://james.revillini.com/projects/lazy-load-elementor-background-images-wordpress-plugin/

I'm working on getting it on the Wordpress.org plugin repo.

Will keep y'all posted. Planning to create a git repo for this as well. Thanks for all the comments and input!

@slamdive

This comment has been minimized.

Copy link

@slamdive slamdive commented Feb 10, 2020

Hey boys ... guess what ...

LATEST VERSION LAZY LOADS COLUMN BACKGROUNDS! 🔥🔥🔥

Send feedback!

Works perfectly!!! ;-) Awesome work!!!

Really excited about the plugin!
Link on your site doesn't appear to be working yet - will try again later!

Thanks so much mate... Outstanding!

@jrevillini

This comment has been minimized.

Copy link
Owner Author

@jrevillini jrevillini commented Feb 10, 2020

Works perfectly!!! ;-) Awesome work!!!

Really excited about the plugin!
Link on your site doesn't appear to be working yet - will try again later!

Thanks so much mate... Outstanding!

@dollhauss well that was freakin embarrassing! 😫 Sorry!

The download link works now. I forgot that I had to rename the zip file due to Wordpress.org's trademark name filter. Let me know how it works. It's installed on my site and seems to be doing the job.

One more time for the download link: https://james.revillini.com/projects/lazy-load-elementor-background-images-wordpress-plugin/

holla back: @Deralict, @Jordidriesen, @lbraida, @sermalefico, @newbie7777,

@slamdive

This comment has been minimized.

Copy link

@slamdive slamdive commented Feb 10, 2020

Plugin working great. No issues.
I only have it installed on one site so far - will be installing it on many others.
I'll let you know how it all goes.

Thanks again mate!

@jrevillini

This comment has been minimized.

Copy link
Owner Author

@jrevillini jrevillini commented Feb 11, 2020

Plugin working great. No issues.
I only have it installed on one site so far - will be installing it on many others.
I'll let you know how it all goes.

Thanks again mate!

Awesome! Hey before you go crazy installing everywhere, I just got approved to add it to the Wordpress.org plugin repo. I think it'll pick up on the slug of the plugin and allow auto-updating, but just to be safe, you may want to wait and install from the repo once I get it uploaded. Will be up there in about 12 hours.

@slamdive

This comment has been minimized.

Copy link

@slamdive slamdive commented Feb 11, 2020

Wow that was fast!
I'll wait to see it on the repo before adding to any other sites! ;-)
Nice work!

@jrevillini

This comment has been minimized.

Copy link
Owner Author

@jrevillini jrevillini commented Feb 11, 2020

@dollhauss, @Deralict, @Jordidriesen, @lbraida, @sermalefico, @newbie7777

It's live in the repo! Give it a shot and a nice review if it works!
https://wordpress.org/plugins/lazy-load-background-images-for-elementor/

@sermalefico

This comment has been minimized.

Copy link

@sermalefico sermalefico commented Feb 28, 2020

Great! I'm going to delete the snippet and install the plugin. I'm telling you ...

@slamdive

This comment has been minimized.

Copy link

@slamdive slamdive commented Feb 28, 2020

Here's an additional challenge for you.. Seems a flip box background image works differently. ;-)

@sermalefico

This comment has been minimized.

Copy link

@sermalefico sermalefico commented Mar 11, 2020

hey! The plugin seems to work fine. How do you see how to integrate it with the elementor slide backgrounds? Elementor has now released the swiper APi, maybe you can build something out there so it doesn't load the swiper before it is seen in the viewport. What do you think?

@jrevillini

This comment has been minimized.

Copy link
Owner Author

@jrevillini jrevillini commented Mar 11, 2020

Here's an additional challenge for you.. Seems a flip box background image works differently. ;-)

@slamdive Not sure what flip-box is ... do yo mean you added a motion effect to either a row or column? Or is it an element which serves images using some animation? If that's the case, I can't lazy load them because it would kill the motion effect. In order for motion effects to work, the element with the background needs to be moved from a hidden state/location to a visible one. Since the element with the background is hidden until it's brought into the viewport by Elementor's scripts, my script would have a hard time detecting the right time to load the image. And if it started loading as soon as their script animated it into the viewport, it would probably ruin the animation.

But do let me know if you have any ideas about triggering the image to load. If I can make it work, I will!

@jrevillini

This comment has been minimized.

Copy link
Owner Author

@jrevillini jrevillini commented Mar 11, 2020

hey! The plugin seems to work fine. How do you see how to integrate it with the elementor slide backgrounds? Elementor has now released the swiper APi, maybe you can build something out there so it doesn't load the swiper before it is seen in the viewport. What do you think?

@sermalefico Is it part of regular Elementor or Pro? I'll try to create a test environment and add the capability to lazy load it. Do we know for certain that swiper is not lazy loading for sure? Tell me what I need to create a test environment - like specifically which plugins. Thanks!

@slamdive

This comment has been minimized.

Copy link

@slamdive slamdive commented Mar 11, 2020

Heya!

Flip Box is an Elementor Pro widget.
The main issue is the background image on the front of the Flip Box - the one in view until you hover.
Background image is loaded under the class: .elementor-flip-box__front

@sermalefico

This comment has been minimized.

Copy link

@sermalefico sermalefico commented Mar 11, 2020

hey! The plugin seems to work fine. How do you see how to integrate it with the elementor slide backgrounds? Elementor has now released the swiper APi, maybe you can build something out there so it doesn't load the swiper before it is seen in the viewport. What do you think?

@sermalefico Is it part of regular Elementor or Pro? I'll try to create a test environment and add the capability to lazy load it. Do we know for certain that swiper is not lazy loading for sure? Tell me what I need to create a test environment - like specifically which plugins. Thanks!

This is the elementor anuncament https://developers.elementor.com/expose-swiper-in-elementor/

The slider image background of sections and columns use swiper slider. Whith this new implementation you can interact whith the swiper slider instance of any section. I think it could be a beginning.

I suppose you could make a rule that adds a class to swiper and another to the section that has the background slider feature doesn't start until it's in viewport. If so, Swiper slider has an option in the api to make it lazy.

@jrevillini

This comment has been minimized.

Copy link
Owner Author

@jrevillini jrevillini commented Mar 12, 2020

Heya!

Flip Box is an Elementor Pro widget.
The main issue is the background image on the front of the Flip Box - the one in view until you hover.
Background image is loaded under the class: .elementor-flip-box__front

@slamdive can you shoot me a zip of elementor pro? james at vandertech dot com
I should be able to add support for it.

@jrevillini

This comment has been minimized.

Copy link
Owner Author

@jrevillini jrevillini commented Mar 12, 2020

hey! The plugin seems to work fine. How do you see how to integrate it with the elementor slide backgrounds? Elementor has now released the swiper APi, maybe you can build something out there so it doesn't load the swiper before it is seen in the viewport. What do you think?

@sermalefico Is it part of regular Elementor or Pro? I'll try to create a test environment and add the capability to lazy load it. Do we know for certain that swiper is not lazy loading for sure? Tell me what I need to create a test environment - like specifically which plugins. Thanks!

This is the elementor anuncament https://developers.elementor.com/expose-swiper-in-elementor/

The slider image background of sections and columns use swiper slider. Whith this new implementation you can interact whith the swiper slider instance of any section. I think it could be a beginning.

I suppose you could make a rule that adds a class to swiper and another to the section that has the background slider feature doesn't start until it's in viewport. If so, Swiper slider has an option in the api to make it lazy.

@sermalefico cool. looks like it's part of core so i'll work on this.

@sermalefico

This comment has been minimized.

Copy link

@sermalefico sermalefico commented Mar 12, 2020

hey! The plugin seems to work fine. How do you see how to integrate it with the elementor slide backgrounds? Elementor has now released the swiper APi, maybe you can build something out there so it doesn't load the swiper before it is seen in the viewport. What do you think?

@sermalefico Is it part of regular Elementor or Pro? I'll try to create a test environment and add the capability to lazy load it. Do we know for certain that swiper is not lazy loading for sure? Tell me what I need to create a test environment - like specifically which plugins. Thanks!

This is the elementor anuncament https://developers.elementor.com/expose-swiper-in-elementor/
The slider image background of sections and columns use swiper slider. Whith this new implementation you can interact whith the swiper slider instance of any section. I think it could be a beginning.
I suppose you could make a rule that adds a class to swiper and another to the section that has the background slider feature doesn't start until it's in viewport. If so, Swiper slider has an option in the api to make it lazy.

@sermalefico cool. looks like it's part of core so i'll work on this.

This is the options to uddate to swiper

var mySwiper = new Swiper("#swiper", {
preloadImages: false,
lazy: {
loadPrevNext: true,
loadOnTransitionStart: false,
},

});

@sermalefico

This comment has been minimized.

Copy link

@sermalefico sermalefico commented Mar 17, 2020

There is a problem with the lazyload on slider widget. The last slide that is duplicated dont load the background image if is active loop mode.

@jrevillini

This comment has been minimized.

Copy link
Owner Author

@jrevillini jrevillini commented Mar 17, 2020

There is a problem with the lazyload on slider widget. The last slide that is duplicated dont load the background image if is active loop mode.

Confirmed. I am working on it.

@jrevillini

This comment has been minimized.

Copy link
Owner Author

@jrevillini jrevillini commented Mar 17, 2020

There is a problem with the lazyload on slider widget. The last slide that is duplicated dont load the background image if is active loop mode.

Confirmed. I am working on it.

This is so strange! It almost seems like a browser bug. First of all, it wasn't doing this when I released it. I have a test page here https://dev.revillini.com/slider-test/ and I'm pretty sure it was working perfectly a few days ago. Secondly, when I look at the live DOM, the style properties are set correctly on all slides. And thirdly, when the first slide begins to animate out of view, the background image flashes into view. I'm perplexed! Watch this video of how the background image flashes into view for a moment: https://drive.google.com/file/d/13gK_Y5laY_veAModLEUdRIA5BaOOgnF1/view

This is strange indeed!

@jrevillini

This comment has been minimized.

Copy link
Owner Author

@jrevillini jrevillini commented Mar 17, 2020

There is a problem with the lazyload on slider widget. The last slide that is duplicated dont load the background image if is active loop mode.

Confirmed. I am working on it.

This is so strange! It almost seems like a browser bug. First of all, it wasn't doing this when I released it. I have a test page here https://dev.revillini.com/slider-test/ and I'm pretty sure it was working perfectly a few days ago. Secondly, when I look at the live DOM, the style properties are set correctly on all slides. And thirdly, when the first slide begins to animate out of view, the background image flashes into view. I'm perplexed! Watch this video of how the background image flashes into view for a moment: https://drive.google.com/file/d/13gK_Y5laY_veAModLEUdRIA5BaOOgnF1/view

This is strange indeed!

@sermalefico I finally figured it out. It's fixed in version 1.1.2 which is now live on wordpress.org

If you want the explanation, I believe Swiper adds additional DOM elements (copies of slides) after initialization. I had to set a Waypoint check on the swiper container object and, when it came into the viewport, I remove my lazyload class from all slides. This is technically not as efficient as your suggestion to leverage the Swiper API and utilize the native lazy load features, but for some reason I had a hell of a time trying to capture an instance of the Swiper elements and modify the parameters at the right point in time prior to initialization. I hope that Elementor Pro developers add the ability to switch on lazy loading for these right in the Elementor widget options UI.

Let me know how this works for you!

@ZaukaYarria

This comment has been minimized.

Copy link

@ZaukaYarria ZaukaYarria commented Mar 23, 2020

Hey!
I was so happy to find your code and plugin, thank you so much for it! I was excited to try it on my live site's dev version. After activating it nothing changed in loading experience, so I activated it on the live site to be sure about it - and it was the same.

The problem why I need this plugin / code:
If you open https://twentysixbudapest.com/ site, the header image shows up only after the whole page loading, as this is a background image. On some screens the first content below the header image can be visible with a few seconds before the header image - and this have to be solved.

I hope there is an easy way to make the header image load first and not just after the whole page. Can you check it for me, please? Let me know what to do or try, I can manage it on a dev site.

@jrevillini

This comment has been minimized.

Copy link
Owner Author

@jrevillini jrevillini commented Mar 23, 2020

@ZaukaYarria I see that your site is using WP Rocket - have you cleared the WP Rocket Cache? You can do so from the admin bar > WP Rocket > Clear Cache
None of my scripts from the plugin are showing up in the source code of your home page so either the Lazy Load Elementor Background Images plugin is deactivated or the WP Rocket cache are the most likely reason. Make sure you clear the cache AFTER you activate my plugin. Hope this helps! If not, hit me up!

@ZaukaYarria

This comment has been minimized.

Copy link

@ZaukaYarria ZaukaYarria commented Mar 24, 2020

Your plugin is active, so I've cleared the cache in WP Rocket, and now it works. :) Thanks a lot for your help!

@Overbord

This comment has been minimized.

Copy link

@Overbord Overbord commented Apr 28, 2020

This is working on my site, but can I make a feature request?

While it works for background images, it doesn't work on just normal images - if it did then a lot of plugins would be compatible with it. For example on my site here, the images in the accordions don't lazy load because they're not background images.

Thanks for the great plugin though!

@jrevillini

This comment has been minimized.

Copy link
Owner Author

@jrevillini jrevillini commented Apr 28, 2020

@Overbord so here's my thinking ... there are many great plugins which already do lazyload for the actual images. There's BJ Lazy Load if you want a free one; and many of the caching plugins such as WP Rocket have it built in. So I have to think about this. It's not a bad idea at all, I would just need to add a bunch of code to try to avoid plugin conflicts.

@Overbord

This comment has been minimized.

Copy link

@Overbord Overbord commented Apr 28, 2020

@jrevillini Sure - the thing is that most of those plugins don't actually make lazy loading work with Elementor. WP Rocket's definitely doesn't - I haven't tried BJ Lazy Load but I'll give it a shot.

@jrevillini

This comment has been minimized.

Copy link
Owner Author

@jrevillini jrevillini commented Apr 28, 2020

@Overbord I use WP Rocket with Elementor and it definitely works for normal images. Are you sure you turned it on in WP Rocket options? I mean, Elementor just adds a bunch of layout stuff and some widget stuff, but in most image-related cases, it's outputting [img] tags which are all generall handled correctly by lazy loading plugins as long as Elementor doesn't load images in via Javascript AFTER the lazyload plugin has run.

@Overbord

This comment has been minimized.

Copy link

@Overbord Overbord commented Apr 28, 2020

@jrevillini Okay I just disabled lazy loading while I messed around with Optimole, then deactivated Optimole, and now lazy-loading's working.

So yeah maybe you're right and it's not necessary.

@skiild

This comment has been minimized.

Copy link

@skiild skiild commented Aug 9, 2020

Hi, as I really don't understand PHP, would you mind telling me how to add some code to exclude lazyloading on section having a specific class ? (or only include the one with a specific class ?)
Background image that are visible when the page is load are first invisible then loaded, which gives the impression of a slower loading, so I would like to ignore my first background image.
Thanks !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.