Remove lazy loading from a picture

This topic has 11 replies, 2 voices, and was last updated 2 years, 4 months ago by Luke Nielsen.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
July 5, 2022 at 9:49 pm #388908
juliette
Participant
Hello support team,

I would like to remove lazy loading from a specific image. I tried the following custom css but it didn’t work:
```
.attachment-thumbnail.size-thumbnail.wd-lazy-load.wd-lazy-fade {
		loading: eager;
}
```
The custom selector is correct, but the loadingpart appeared in red, so it’s probably not accepted as is…

Could you please help me correct this?

Many thanks
July 6, 2022 at 10:59 am #389026

Luke Nielsen
Keymaster

Hello,

Sorry, but we don’t have such an option that can disable lazy loading for a specific image. You can enable it globally or for a specific element via page builder.

If you’d like to contact us, we are here for whatever questions you may have.

Kind Regards

July 6, 2022 at 12:21 pm #389067

juliette
Participant

Hello Luke,

Okay I understand.
Just thinking about a potential solution: in lazy loading settings, we can define a loading offset. Is there a way to change the offset value for one image maybe?

Otherwise I’ll think of something else to make this image appear properly.

Thank you

July 6, 2022 at 2:45 pm #389107

Luke Nielsen
Keymaster

Hello,

Unfortunately, there is no way to change the offset value for one image.

Please, describe your issue with the image so we will try to help you with it.

Kind Regards

July 6, 2022 at 3:12 pm #389119

juliette
Participant

Hello Luke,

Thank you. My issue is the following.

I have installed a plugin to add gift wraps to orders. On the cart page, there is a button to add the gift wrap that opens a popup to set it. In this popup, there is a picture of the gift wrap. However the image doesn’t load, I think because of lazy loading. I have to scroll down to force it to appear.
Do you think of something that could help display this image correctly?

I added relevant links, screenshots and admin access below.
Thank you

Attachments:
You must be logged in to view attached files.

July 7, 2022 at 10:21 am #389300

Luke Nielsen
Keymaster

Hello,

You should contact plugin support so that they would add compatibility with our theme when opening their popup.

The below code causes pictures to load.

$(document).trigger('wood-images-loaded');

Kind Regards

July 7, 2022 at 12:45 pm #389351

juliette
Participant

All right I will.

Thank you Luke!

July 7, 2022 at 2:54 pm #389398

Luke Nielsen
Keymaster

Hello,

Let me know when they sorted it out.

Have a good day!

Kind Regards

July 13, 2022 at 11:10 am #390700

juliette
Participant

Hello Luke,

The plugin support replied to my request. Unfortunately they don’t want to add JavaScript just to support one theme.

So I am looking for another solution. I am trying to include the image in a section before the plugin so that it is already loaded when the plugin appears. I set this section as hidden on all devices in Responsiveness settings so that it loads but doesn’t show.

Unfortunately my tries haven’t been conclusive:
– I tried to create a custom cart page with Layout builder but it erases my current customizations (free shipping bar removed as well as the plugin we are talking about).
– I also tried to include it in the megamenu of my header but it didn’t work either. Anyway, it would not have worked for mobile since this megamenu is not in the mobile menu.

Would there be a way to add custom css to include the picture at the top of the cart page and hide it from all devices?
Here is the url of the picture (size 150x150px): https://jubilefrance.com/wp-content/uploads/2022/06/pochette-cadeau-jubile.jpg

Thank you !

July 13, 2022 at 2:41 pm #390795
Luke Nielsen
Keymaster
Hello,

I suggest you try the below code that shows an image by clicking on the “Ajouter une pochette cadeau ?” button.
```
.woocommerce-cart .giftwrap_products .giftwrap_details:after {
    content: '';
    display: block;
    background-image: url(https://jubilefrance.com/wp-content/uploads/2022/06/pochette-cadeau-jubile.jpg);
    height: 160px;
    width: 160px;
    background-repeat: no-repeat;
    background-size: cover;
}
```
After that, you can remove the image that comes from the plugin.

Result: https://monosnap.com/file/8z3HorQYfz08zEBRBjd9dDvJZvMWch

Kind Regards
July 14, 2022 at 9:15 pm #391154

juliette
Participant

Hello Luke,

Thank you very much for this solution, it works very well now.

And thank you for going the extra mile on this issue, it is much appreciated 🙂

July 15, 2022 at 9:43 am #391235

Luke Nielsen
Keymaster

Hello,

I’m glad we managed to sort this out.

Our customers are incredibly important to us here and your satisfaction remains our priority at all times and we’re excited to serve awesome customers like you in any way we can.

Thanks for your time and have a great day.

Kind Regards
Author

Posts