Jump to content

Why are all <img> images fading in, when no Fading animation is set?


simona6
 Share

Recommended Posts

On our website we have various images, but they all seem to 'load in'... rather than just 'appear'.

It's particularly noticeable on the curved image at the top of our site.

IS this something anyone has come across before?  Happy to post link if that is allowed.

 

Simon

Link to comment
Share on other sites

I don't know your website. All I can do is point you in a direction to look for more answers.

Do you have any sort of lazy image loading set up? Looks like you have some WP theme going - could that be responsible?

And it doesn't seem to be "all" images. Mostly just that green wavy banner thing.

Link to comment
Share on other sites

The theme doesn't have any setting for lazy loading.  We use to do it via Fastest cache, but we no longer use that plugin.

Can you show me what code or what you have found that alerts to you Lazy Loading, if only for that image?  I notice on the smaller 'tiled' images below, they do it too, when you refresh the page.

Link to comment
Share on other sites

On the <img> for the green banner, it has set loading=lazy. I randomly checked a few other images that didn't seem to be fading in and they don't use lazy loading.
When I load the page, I can see that the CSS opacity on the image is being changed (by Javascript). I can intercept the Javascript that is doing that and see it happening, however it's not an easy matter to see what code is responsible for it.

Those preloading things are separate and not related.

Link to comment
Share on other sites

Not very easily, at least. The opacity changes are asynchronous, which means the code making the changes isn't connected to the code that started the process.

The best lead I can offer you right now is that the fade in effect seems to be applied only to the green banner, as far as I can see. So look at that and find out what makes it different from other images.

Link to comment
Share on other sites

You are dead right. I've replaced the Image WP Bakery method with the Text Box method, and a little CSS to take any padding off around it, and it loads instantly.

It must be part of WP Bakery!  In that case I'll setup a CSS class to cater for all those curves, and re-assign them with that method.

Thanks a lot.  Just wish I could ascertain where in Bakery it is doing it.  As the otheres, the tiles below it, they do it.  They use the Image element.  I dont' care abotu those fading in... but would be nice to have the control!

Link to comment
Share on other sites

Rolled it out on a few other pages now.  They load instantly.  Good intentions from Bakery, but better to let the designer control it I think.

Anyway.... at least I can control it using this method.  Thanks for your help.

Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.