We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

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

  • #8771
    Avatar photo[anonymous]


    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;
               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:

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

    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?

    Avatar photoBob

    That’s a good idea, I’ll add it in the next theme release.

    Avatar photo[anonymous]

    Great news, thank you @Bob for taking that into consideration!