Lazy Load Exclusions Per Image

Hi @alanwp81,

Exclusions are added based on post types, page URLs or using classes/IDs. From your query, I suppose you are trying to add an exclusion in “Classes & IDs”.

In that case, you’ll need to add the class name or ID based on the HTML structure where the image is loading. For example, suppose the following would be the HTML of the image loaded:
<img class="image-one" src="path-to-image">

In the above example, the class name is “.image-one”. So you’ll need to add the class name as shown below as an exclusion:
.image-one

The same goes for ID, for example:
<img id="image-two" src="path-to-image">

Which would be:
#image-two

I hope this clears your query. If you aren’t sure about the class name that needs to be added, then please share the link to the page and point the image which you are looking to add as an exclusion so that we could provide the correct class or ID if needed.

Looking forward to your response. Have a nice day ahead.

Kind Regards,
Nithin

Appreciate the detailed explanation, Nithin. For some reason, I don’t see the image or class IDs. Could it be because of elementor? The images that are not loading properly (reason for the exclusions) seem to be background images. Dont know if that helps much. Thanks

Just for further clarity. I’m identifying the image IDs through the WordPress image URL (not the image URL), I’m then pasting it to the exclusion box.

Example WordPress URL:
mysite.com/wp-admin/upload.php?item=1870

Example Image ID:
1870

Example exclusion box:
#1870

Hi @alanwp81

Sorry for the delay here.

The HTML ID is not the same as the item ID, we can add any custom ID or class on the HTML that not reflect the item ID since it is used for style.

Appreciate the detailed explanation, Nithin. For some reason, I don’t see the image or class IDs. Could it be because of elementor?

I checked Elementor and it seems the page builder doesn’t add the class on the image, but on the container.

Is it possible to send the URL where you have the error so we can check source code?

The images that are not loading properly (reason for the exclusions) seem to be background images.

The Lazy Load doesn’t affect background images, only images that use the HTML image tag.

Kindly share the link where you see the problem and we can take a closer look at it.
Best Regards
Patrick Freitas

Hi Patrick – I’ve since been able to identify the image classes in HTML for Elementor and properly exclude them but from what I can see, and I know you mentioned it shouldn’t affect the background images, it’s affecting not only the background images but the dynamic progress bar (0 to 100%) and dynamic counters too (0 to the defined numbers). When I use the Smush URL page exclusion function, everything functions properly but when I remove the URL, the problems come back. It’s on localhost, sorry I know that makes it more difficult. Any alternatives or additional insights? Thanks

Hi @alanwp81

Thanks for response!

I tried to replicate that but I couldn’t, I admit I’m not sure how should I set/build a page that would work like yours.

Perhaps you could set some “dev” site – even with just a single example page that would be like those affected on your local site – in some public location? A lot of hosts provide e.g. free trial accounts that could be used for that.

Being able to actually see that in action and look into page source code and “live” browser console could really help a lot in further troubleshooting.

Best regards,
Adam

This is something I’ll look into and get back to you guys soon. Thanks

Hi @alanwp81

Sure, feel free to ping us any time you need.

Best Regards
Patrick Freitas

Hi @alanwp81

I hope you are doing well.

We haven’t heard from you in a while, I’ll go and mark this thread as resolved.

However, feel free to let us know if you have any additional question or problem.