Different lazy loading styles, or screen-adapted delivery without lazy-loading

Hi there,

This is the option that allows you to change the behavior of lazy-loading images – https://vertis.d.pr/QYc4Hm (it controls whether you see the blurry version of the image when it’s lazy-loaded or not).

No, without the image being lazy-loaded by Optimole it cannot be scaled.

Thanks Vytis!
This is much better.

Is there a way to make the loading image fade in like it is currently on my main website (https://barbandcarole.ca)? It really doesn’t look great when the images just abruptly “flash” into existence (in the sliders).

I tried using something like this, but it doesn’t seem to work.

img[data-opt-lazy-loaded="true"] {
	opacity: 0;
	animation: fade-in ease 0.25s forwards;
}
	
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

img.opt-lazy-loading {
	opacity: 0;
}
	
img.opt-lazy-loading[data-opt-lazy-loaded="true"] {
	  -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    transition: all .25s ease;
    opacity: 1;
}

I think something like the above would work well if only optimole image had a class like this one.

Would that be possible?

Hi @nazrinn,

We don’t have other options for animations of lazy-loaded images, however, I think this is a great suggestion and I’ve forwarded it to our development team as a feature request.

I can’t confirm that will be implemented nor I have a timeline for it, however, I hope it will be an option in the future to select the animation for lazy-loaded images and set the time for that transition as it sounds really great!

That’s great to hear! Thank you!

Adding an HTML class to lazy-loading images would already help tremendously in “tracking” the image to animate, without adding animation options to the UI.
The latter code block I showed earlier is how I handle animations with LiteSpeed Cache‘s lazy-loading. They made a simple tutorial on how to create a lazy-load animation for their plugin. But of course, I don’t get smart image resize when using LSC for lazy-loading!

For reference, here is an image of LiteSpeed Cache’s lazy load settings. I think Optimole could use something similar to some of those options.

Let me know if there is any more you need.

• This reply was modified 3 years, 9 months ago by Nazrinn.
• This reply was modified 3 years, 9 months ago by Nazrinn.