Issue with lazy load image & Autoptimize

Hi, I use Speed Booster Pack & Autoptimize and they work great together in combination.

But there is one issue with lazy load (lazyload.js).

The issue seems to be related with lazy load of script files and when they are aggregated.

I excluded the lazyload.js file in Autoptimize, but the issue still arrives when I enable aggregation of JS files in Autoptimize.

Key issue is how Speed Booster Pack loads the inline JavaScript.

wp_add_inline_script( 'sbp-lazy-load', $lazy_loader_script );

This will load the inline code AFTER the lazyload.js file.
The documentation states, the inline code must come BEFORE loading the async script: https://github.com/verlok/vanilla-lazyload#using-an-async-script

So my fix currently is to modify the plugin and add the inline before the script:

wp_add_inline_script( 'sbp-lazy-load', $lazy_loader_script, 'before' );

Seems like Google Chrome can handle both cases, but Firefox won’t init the script and it is never executed.

Would be great to have this fixed in the next version.

Update:
just to clarify:
If the script is loaded async, then this issue happens.
Usually the script is not loaded async (or defer) and then this won’t be an issue. But when async is used, the script will execute immediately and will ignore the inline code AFTER the script tag. Therefore it must be placed BEFORE. ??

• This topic was modified 11 months, 4 weeks ago by Alex Diller.