Preferred method of avoiding FOUC

[719media]

Hello,

I used to use src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" in my tags. I did this to avoid alt="some alt text" FOUC when initially loading the page. However, given issues like the following:

#509
(the above link references to the below 2 links, in another library)
verlok/vanilla-lazyload#212
https://github.com/verlok/lazyload#do-not-use-placeholder-images

I have stopped doing using the transparent pixel method. I noticed that you are also removing some of these same things in some of your latest commits. I also had an unusual condition that came about because of the use of the 1x1 pixel being used in place of another image that had a different ratio cause some DOM layout issues until the image became lazyloaded.

However, the result is that I now sometimes have the flash of alt text before my images begin loading. What is the preferred method of avoiding this? Currently, the only other solution I have is to stop using alt="" attribute completely. If I add .lazyload{ visibility: hidden; }, this negatively affects image rendering time on initial load as it places the images further down the priority chain. If I use class="lazypreload", then it loads all my images, even ones that I don't want to load yet. So, I'm not sure of the best solution?

[719media]

I settled on

.lazyload {
  opacity: 0;
}

which seemed to work for my needs.

[aFarkas]

With current version you can do this:

.lazyload {
  opacity: 0.0001;
}

With next version you will be able to do this:

.lazyload {
  visibility: hidden;
}

Because then I will handle visibility: hidden; only if the .lazyload element and his parent is hidden not only the element itself.

[719media]

@aFarkas Thanks for the reply. Is there a particular reason that opacity: 0.0001 is needed? In the code, I see special conditions for display: none and visibility: hidden, but nothing for opacity: 0, so I was just curious.

[aFarkas]

Well, if you are using it only on img elements it is fine. If you are using it on div elements (positioned ancestor elements) it might be treated identically to visibility: hidden. But you shouldn't run into this.

[AlanaFarkas]

Hi @aFarkas from another (totally unrelated, as far as I know) AFarkas!

I've applied visibility: hidden on the .lazyload class and it works well in Chrome and Safari but does not work for Firefox browsers. I needed to add a Firefox-specific selector like this:

 @-moz-document url-prefix(): {
   &.lazyload: {
     visibility: hidden
  }

Not sure why this is needed but thought I'd drop it here.

[felix-lunii]

@aFarkas Thanks for the reply. Is there a particular reason that opacity: 0.0001 is needed? In the code, I see special conditions for display: none and visibility: hidden, but nothing for opacity: 0, so I was just curious.

I know it's been a long time since you asked the question but if you are still interested in the response, It's llinked to the fact that transitionning to opacity 0 triggers a repaint of the component while opacity 0.001 does not !
tldr: 0 to 1 ==> repaint | 0.1 to 1 ==> no repaint