Check if image is loaded?

It seems that in a gallery with a large numbers of items it can happen that data-loaded=true or any class you add in the callback, for that matters, can be applied to an image while the background image is not yet fully loaded. This results in a suddenly appearing image (especially when the images itself are fairly large) because the transition was already applied before the image was loaded in the browser.

I would propose to test if the image is actually loaded before adding the data-loaded=true attribute. Maybe like

const imgLoad = new Image();
imgLoad.onload = () => {
  element.dataset.loaded = true;
}
imgLoad.src = element.dataset.src;

There might be better ways to check if the images are loaded, but you catch my drift 😃

edit: This does lead to the loading of two files when the srcset file which is loaded is different from the src file. This could be fixed by polling if element.currentSrc is set and use that image for the imgLoad.src.

[justinasdmt]

Hey guys, Any update on this? Does anyone have a solution to really check if the image is fully loaded?

[forepointmc]

Just have to say that I don’t recommend this library to anyone. It sucks ass. I used it on two projects after reading the CSS Tricks article about it, and I’ve had nothing but issues with it. It doesn’t check to see if an image has loaded, data-loaded=true is always present on the element. Images sometimes never load, or half load. The fact that this core issue is still unresolved after so long says it all.