Support » Plugin: Autoptimize » Lazysizes css for styling loader not working

  • Resolved snippet24

    (@snippet24)


    I consider as important from accesibility that the user knows that an image is going to be loaded. For that the Lazysizes uses the following css
    .lazyloading {
    opacity: 1;
    transition: opacity 100ms;
    background: #f7f7f7 url(loader.gif) no-repeat center;
    }
    But is not working so is there any way to do so with Autoptimize?
    Regards!
    Tomás

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

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

    (@optimizingmatters)

    You can hook into the autoptimize_filter_imgopt_lazyload_cssoutput filter to alter the CSS AO injects Tomás 🙂

    Thread Starter snippet24

    (@snippet24)

    Great! 🙂 May I ask for more details on the steps to set the hook/functions?
    Regards!
    Tomás

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    sure, it could be something like this;

    add_filter('autoptimize_filter_imgopt_lazyload_cssoutput','tomas_lazyload_css');
    function tomas_lazyload_css($original_css) {
        $new_css = $original_css . '<your css here>';
        return $new_css;
    }

    have fun 🙂
    frank

    Thread Starter snippet24

    (@snippet24)

    Thank you so much!! on it 😀
    Tomás

    Thread Starter snippet24

    (@snippet24)

    I must be doing something wrong..
    Using this code right now:

    add_filter('autoptimize_filter_imgopt_lazyload_cssoutput','spin_lazyload_css');
    function spin_lazyload_css($original_css) {
        $new_css = $original_css . 'background: url(./img/loader.gif) no-repeat; center;>';
        return $new_css;
    }
    • This reply was modified 3 years, 11 months ago by snippet24.
    Plugin Author Optimizing Matters

    (@optimizingmatters)

    my bad, you’ll have to try something like this instead;

    add_filter('autoptimize_filter_imgopt_lazyload_cssoutput','spin_lazyload_css');
    function spin_lazyload_css($original_css) {
        $new_css = str_replace( '</style><noscript>', 'background: url(./img/loader.gif) no-repeat; center;</style><noscript>', $original_css );
        return $new_css;
    }
    Thread Starter snippet24

    (@snippet24)

    Ok still not working, maybe the opening/closing tags should be different well I tried many combinations but nothing.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    well, the altered code is in your autoptimized CSS file, at the end;

    
    .lazyload,.lazyloading{opacity:0}.lazyloaded{opacity:1;transition:opacity .3s}background:url(https://tomastestart.cl/wp-content/themes/tomastestart/img/loader.gif) no-repeat;

    so now it’s a matter of the CSS not being OK yet, guess you’ll need to add the background to a specific selector (.lazyload, .lazyloading)?

    Thread Starter snippet24

    (@snippet24)

    I honestly couldn’t get it to work so at least for now I’m considering installing Lazysizes script..

    • This reply was modified 3 years, 11 months ago by snippet24.
Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Lazysizes css for styling loader not working’ is closed to new replies.