Adjust Image lazy load display threshold

lazysizes, the JavaScript component used by autoptimize, will load below-the-fold (i.e. non-visible) images after the onLoad event has fired so if you don’t want those to be loaded at all you might want to try another plugin to do lazyload for you. that being said, lazysizes does allow for configuration and you can use AO’s autoptimize_filter_imgopt_lazyload_jsconfig filter to alter the default configuration.

hope this clarifies,
frank

Thanks. You are very kind.

It seems that by using lazySizesConfig.expand (default: 370-500), the viewport can be adjusted.

I was unable to find an example of how to use autoptimize_filter_imgopt_lazyload_jsconfig filter to adjust lazySizesConfig.expand

Could you please help me find an example? Ex: using autoptimize_filter_imgopt_lazyload_jsconfig filter to adjust viewport to 300 (instead of the deafault of 370-500)

Thanks in advance!

Something like below (untested!) code snippet should work ??

add_filter( 'autoptimize_filter_imgopt_lazyload_jsconfig', 
    function( $lazysizes_cfg ) {
        return str_replace( '</script>', 'window.lazySizesConfig.expand=300;</script>', $lazysizes_cfg ); 
    }
);

Thanks. You are very kind.

Your script works perfectly, and I am now being able to alter the viewport/ threshold.

One last question: according to your website lazySizesConfig.expand should have a default: 370-500.

I have been testing the threshold at which the an image I would not like to be loading initially does not load, and this thresh hold is 980 (almost the double of 500), which is supposed to the the maximum default value for lazySizesConfig.expand

Is really the default value of lazySizesConfig.expand 370-500?

had a quick look at the documentation and the expand is not hard-set, but is calculated based on the viewport (size of the browser window, so you’ll want to test on different browser sizes/ devices?