Description
As the title says, on afterLoad the images may not yet be completely loaded.
afterLoad: function(element){
console.log('afterLoad', element[0].complete);
},This is probably due to the use of an intermediate image object internally.
Once that image is loaded the src attribute of the original image is set.
But there is no guarantee that this image will be available immediately.
I guess this is mostly due to UAs decoding images in a background thread today.
There might be other circumstances that can trigger this race-condition.
I tested this with Chrome/78.0.3904.108 and http://ocbnet.ch/jqlazy/
To trigger it I only have to scroll from the top of the page.
If the threshold is already met on load it seems to be ok.
To circumvent this I added another check in afterLoad:
function imageLoaded(image) {
return new Promise(function(resolve, reject) {
if(image.complete) {
resolve();
}
function unbind() {
image.removeEventListener('load', loaded);
image.removeEventListener('error', rejected);
}
const loaded = function() { unbind(); resolve(); };
const rejected = function() { unbind(); reject(); };
image.addEventListener('load', loaded);
image.addEventListener('error', rejected);
});
}
afterLoad: function(element){
console.log('afterLoad', element[0].complete);
imageLoaded(element[0]).then(function() {
console.log('Finally loaded it', element[0].complete);
});
},
IMHO it would be great if this could be integrated into this plugin.
Or at least state this race-condition clearly in the documentation.
AFAICT for background-images this might not be solvable cleanly.