Support » Plugin: Autoptimize » How to Lazyload Images with Smooth Fade Effect?

  • Resolved nikhilazza

    (@nikhilazza)


    I am using lazyload for quite a time and earlier the images used to load smoothly with the fade effect as I use to scroll the page but from the past few months the images are lazy loading good but the smooth scroll lazy load effect is not visible. Anything I can do?

    The page I need help with: [log in to see the link]

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

    (@optimizingmatters)

    I removed some of the inline CSS from for lazyload some time ago (if I remember correctly because it caused higher CLS). Assuming this change is what caused the smooth scroll fade effect to disappear for you (not sure how though), you can use the AO API to re-add the removed CSS like this:

    add_filter( 'autoptimize_filter_imgopt_lazyload_cssoutput', 'lazyload_extra_css' );
    function lazyload_extra_css( $css ) {
        return '<style>.lazyload,.lazyloading{opacity:0;}.lazyloaded{opacity:1;}</style>' . $css;
    }

    hope this helps,
    frank

    Sorry, but can please explain how exactly can I add this CSS code using AO API?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    by adding the code snippet I provided, Tthe easiest & safest solution to do so is using the code snippets plugin.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.