Lazy loading images, but

Question

We know how image lazy loading works. When the page is loaded and you scroll down to an image, it starts loading. Then you scroll down to the next image, it starts loading.

Now, is it possible that when the page is loaded or painted, all the images start loading one by one? So you don't have to scroll down to the next image and wait for it to be loaded?

Let me know if there is any solution for that.

I searched and found nothing like that.

Answer 1

Yes, it's possible. Consider the Promise architecture and the then function. A promise is something that is to be fulfilled. You can chain promises, like this:

function promisedElements(elements, func) {
    let currentPromise;
    let initialPromise;
    for (let element of elements) {
        if (currentPromise) {
            currentPromise = currentPromise.then(func(element))
        } else {
            initialPromise = currentPromise = func(element);
        }
    }
    return initialPromise;
}

where func needs to be a function that takes an element and returns a promise for it (to load that element). So you chain them.