“FadeIn” Lazy-Load feature causes broken images without JavaScript enabled

Hi,

A number of Publii templates come with a nice feature: the ability to gently “fade in” an image that is lazily loaded (generally the default for performance), instead of jarringly show it loading. Unfortunately, the way it is implemented causes the entire site to lose its images when loaded without JavaScript (which is more common than you’d think, especially with privacy issues beeing widely discussed).

The implementation is in a file like visual-override.js with code such as this:

if(params.lazyLoadEffect === 'fadein') {
    output += `
     img[loading] {
           opacity: 0;
     }

     img.is-loaded {
           opacity: 1;
           transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1);
     }`;
}

While the first bit is pure CSS, the “is-loaded” class is only set by JavaScript later on. Thus, if it is disabled, all images will remain invisible due to the opacity being 0.

Fortunately, the solution is quite easy — just add a bit of code to the Footer of the page which only takes action when JavaScript is disabled:

<noscript>
  <style type="text/css">
    img[loading] {
      opacity: 1;
    }
  </style>
</noscript>

Could we please have this added by default to the themes that come with such a feature, to fix the broken images in no-script mode?