Check if image is loaded?

[aderaaij]

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.

[midzer]

Yeah, incase you want some animation or something like that to kick in, you have to ensure images are properly loaded first of all.

[stephenkingsley]

we can provide a list to save imgs loading status.

imgsStatus = [{ node: imgObject, status: true }];

And when have a img change status, we should update this list, and provide callback function. The developer can do whatever they want in this callback function.

const statusChange = (target, targetStatus, imgsStatus) => {};

If just add data-loaded=true attribute is not helpful and convenient to developers.

[midzer]

In my similar library, i simply put element.classList.add('loaded'); to each element that has been successfully loaded and begin an animation or something if necessary. Works for video and components lazy-loading any JavaScript, too.

You can check out code here https://github.com/midzer/lazyobs/blob/master/lazyobs.js

[jimblue]

Hi @midzer, Lozad already provide such feature for a long time... data-loaded is added on element load. The problem is the liability of the loaded check.

I'm actually using css to fade in on load like this:

.lozad {
   opacity: 0;
   transition: opacity 1000ms ease 100ms;
}

.lozad[data-loaded] {
   opacity: 1;
}

It's working 50% of the time as sometime the loaded content just popup without fading.

Apparently it's because the actual loaded callback is not precise.

I guess this is the subject of this topic...

[aderaaij]

@jimblue is right. The data-loaded just happens when the strings get switched from data-src to src, that is not checking if the image is loaded.
Anyway, @jimblue, I made a fork of this repo which has a checking if images are loaded, but I changed some other stuff too. Let me see if I can get a pull request going. You can also add the code I added in the opening of this topic!

edit: Pull request added. It's quick and dirty and fails the tests but I wanted to get the ball rolling. You could already use the technique if you want to. #79

[jimblue]

Hi @ApoorvSaxena,

This issue start to get old now but it's still unresolved. (more than 4 months)
However it's kind of a high priority one as you tagged it.

There is already a PR on the go here #79 , just need your input on it...
Could you please have a look?

Thank you

Cheers

[jimblue]

Hi @ApoorvSaxena !

Any update about this issue? Do you plan to fix it or not?

Cheers

[jimblue]

You should read comments on this PR #86, me and others made some suggestions that could help.

[jimblue]

An article about lazyloading images using intersection observer:

https://scotch.io/tutorials/lazy-loading-images-for-performance-using-intersection-observer