Images do not display if Lazyload is ON

what happens if you reset to default setting and only enable lazyload , does it work?

Hi

I reset Litespeed and nothing changed. I disabled all plugins – still not loading.

Hovering over an image (where the image should be) the styles shows:

img[data-lazyloaded] {
opacity: 0;
-webkit-transition: opacity .3s linear .1s;
-moz-transition: opacity .3s linear .2s;
transition: opacity .3s linear .2s;
}
from wp-content/litespeed/css/0dac0a25cbafc221630e08cf8f0aaf4f.css

I have tried adding the following css to my custom css file:

img[data-lazyloaded] {
? opacity: 1 !important;
? -webkit-transition: opacity .3s linear .1s;
? -moz-transition: opacity .3s linear .2s;
? transition: opacity .3s linear .2s
}

With this code added the images eventually load, but the site is very slow.

I have Shortpixel Image Optimizer plugin, but even if I disable this plugin it makes no difference. I have turned off Image Optimizer settings in Litespeed as I don’t need images being optimized twice.

Thanks for your assistance.

is that css still in place ? because I don’t see it loading

and when you say slow , how exactly is it ? like page loading slow ? image showing up slow or something ?

I have added the css again. Images slow to load. Thanks

well, it looks normal to me , that’s how lazyload works , if you think this loads images too slow , you might just disable lazyload

are you not getting the grey box? On pagespeed insights it says to properly size images – as if the images have not been optimized.

yes, grey box is actually the result and effect of lazyload

no , that one is how your theme to choose to display the image, about its size

ok, have disabled Litespeed lazyload, will see how it goes.

Thanks for your assistance.