Sign in

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

  • This topic has 2 replies, 2 voices, and was last updated 2 weeks, 2 days ago by .
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #8771
    Avatar photomgc8

    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?

     

    #8785
    Avatar photoBob

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

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #8787
    Avatar photomgc8

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.