Lazysizes css for styling loader not working

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

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

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

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

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 4 years, 11 months ago by snippet24.

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;
}

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

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)?

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

• This reply was modified 4 years, 10 months ago by snippet24.