Exclude whole class

Good questions.

Re: 15 images in side .gallery … The best way to accomplish this is to give the images in the gallery have their own unique class (such as .gallery-image). Then, navigate in the admin to “Settings > Lazy Load XT” and add it to the text box labelled “Skip lazy loading on these classes”. (Note: Don’t include the period before the classes in this text box; you would just enter “gallery-image”.)

Re: Background images … So what exactly is the problem you are experiencing? Is the background image lazy loading when it isn’t supposed to be? Or is it trying to lazy-load and failing?

If the option is unchecked, then it shouldn’t be trying to lazy-load it at all. Furthermore, even if the option is checked, your normal css should function as expected unless you add data-bg="/path/to/image.jpg" to the element you want to lazy-load a background for. Otherwise, it should be messing with your styling.

Thanks for using my plugin! Let me know if that helps.

Hey Thanks For reply !
I am not able to give the class to images. As they are woocommerce product thumbnails.
This is my website – > https://cardmart.in
There is Product slider on front page !! When you slide the slider ,
Images doesnt load until you scroll down the page .
So i want to skip last 2-3 products in slider.
What i have tried so far is to provide class using jquery & Then exclude it.
But it still lazy load the products.
Here is the screenshot !!
https://i.imgur.com/1TKD2Ny.png
Thanks

So adding it via jQuery then excluding it won’t work, because the excluding action happens via PHP (so by the time it gets to the browser for jQuery to interact with it, it’s already been modified to be lazy loaded). It only checks classes on the image tag, itself, not a tree of classes.

There isn’t a way to do it currently with this version of the plugin. (Maybe someday in the future). However, you may be able to accomplish this by extending the configuration as outlined here: https://github.com/ressio/lazy-load-xt/#options.

Try adding the following to your site’s main .js:

$.extend($.lazyLoadXT, {
  updateEvent: 'slider_next slider_prev'
});

Note: ‘slider_next slider_prev’ aren’t the correct values. You’ll need to set those to the events that trigger the slider changing. Currently, the lazyload update action only fires on ‘load orientationchange resize scroll’. So just navigating the slider doesn’t trigger the lazy load action (until you scroll or resize the screen, for example. Try it out and see). You’ll need to extend the updateEvent option to include the actions that trigger the slider to change.

Good luck! I hope that’s helpful.

Hey,
Sorry i am not that much into coding.
But i really appreciate your help , This trick did the job

$("#Slider-next-button").click(function(event){
        $('html, body').animate({scrollTop: '+=1px'}, 10);
    });

Rating 5 stars for your support & great plugin if you ignore this thing ??

Ah… interesting way to fix the problem! It may not be the most elegant solution, but I applaud your creativity!

Thanks for the positive feedback! I’m glad you found my plugin useful.