[FAQ] Styles not applied before JS is executed – lazysizes issue

[bnomei]

Question: Lazysizes does not calculate size correctly. Images are all lowrez/pixelated.

Answer: if using loadjs from this plugin you probably have to use the css and js to load the main css file and lazysizes javascript file. That way you force the browser to wait for the css to be loaded and applied before starting lazysizes.

return [
    'bnomei.htmlhead.css' => [
        '/assets/css/styles.min.css',  // <-- sharp
    ],
    'bnomei.htmlhead.js' => [
        '/assets/js/lazysizes.min.js',  // <-- sharp
    ],
    'bnomei.htmlhead.loadjs' => [
        '*' => [
            'template' => [],
            'dependencies' => [
                // '/assets/css/styles.min.css',  // <-- low-rez
                // '/assets/js/lazysizes.min.js', // <-- low-rez
                '/assets/js/main.min.js'
            ]
        ],
    ],
];

[bnomei]

in refac remove load js and/or make it a separate plugin. https/2 will replace the need for that sooner or later.