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