For the image lazy loading feature, how can I cancel the default animation effec

  • Resolved 155wlgo

    (@155wlgo)


    1 year, 2 months ago

    I have enabled image lazy loading, but I don’t like the animation effect when images load. How can I cancel this transition animation and make them display directly?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    1 year, 2 months ago

    not sure I understand; by default there’s no animation (that I remember), can you share a link where I could see this happening?

    Thread Starter 155wlgo

    (@155wlgo)

    1 year, 2 months ago

    There is a very fast transition animation from when the image starts loading to when it is fully displayed.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    1 year, 2 months ago

    That’s not in Autoptimize I’m afraid 155wlgo, likely in the theme or another plugin?

    Thread Starter 155wlgo

    (@155wlgo)

    1 year, 2 months ago

    I confirm that the transition animation is from Autoptimize – even after changing the theme, the effect remains. Other lazy loading plugins don’t have this transition animation, but I want to use Autoptimize. Please check this – thank you.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    1 year, 2 months ago

    strange .. just to be sure; do you see this animation on https://blog.futtta.be/ (my personal site) as well @155wlgo ?

    Thread Starter 155wlgo

    (@155wlgo)

    1 year, 2 months ago

    Sorry, I fell asleep yesterday. After testing, I found the problem. If an element has the CSS transition: all .3s ease; effect added, there will be an animation when the image appears. This should be related to how Autoptimize makes images appear. Is it possible to cancel the animation while keeping this CSS? Below is an example website:https://www.wlgooo.com/

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    1 year, 2 months ago

    OK, so that CSS is not in Autoptimize indeed, but you could try to unset transition on images that are lazyloaded by AO, e.g. with something like (might need tweaking, just an example);

    span[data-lazy="image"].lazyload {transition:unset !important;}

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘For the image lazy loading feature, how can I cancel the default animation effec’ is closed to new replies.