Adding Efficiency

All the lazy loading examples we've seen so far involved images placed at considerable distances away from each other. In these cases our algorithm indeed did a fairly good job of loading the images.

But what if the images are placed close enough to each other. As an example consider the following.

Will it even now be justified to give a separate scroll listener for each image? Clearly no!

But before doing this we'll have to determine which images are at the same offset position. Only then can we proceed any further. How can we do this?

Well this is your task to accomplish!

If you are really willing to solve this problem on your own in a detailed guide then you should address the exercise on the next page. Below we just roughly outline the code and its details on how does it finally give us an offsets array where all values are unique and correspond to indexes of images stored in another indexes array.

var offsets = [-Infinity];
var indexes = [];

function populateIndexes(offset, index, i) {
    if (offset > offsets[i]) {
        // current offset greater than previous offset
        offsets.splice(i + 1, 0, offset);
        // create new array with the index
        indexes.splice(i, 0, [index]);
        return true;
    }
    else if (offset === offsets[i]) {
        // same offset
        // offset already appearing in array offsets
        // hence only update the indexes array
        indexes[i - 1].push(index);
    }
    else {
        // offset lesser than previous
        // hence iterate backwards until it becomes greater than previous
        while (offset < offsets[i]) {
            i--;
        }
        return populateIndexes(offset, index, i);
    }
}

First we calculate each image's offset, and then send it to the function populateIndexes() as an argument, besides the image's index (index) and a pointer variable (i). This function does all the job of analysing the provided offset value with the previous values and checking whether it is equal to any, or less than any.

At the end of the loop we are ultimately left with two arrays offsets and indexes. offsets holds the offsets of all the lazy images, in sorted order whereas indexes holds the corresponding indexes of the images.

For example if we have four lazy images with the offsets: 100, 200, 100, 300, in this very order in the HTML, at the end offsets will be [100, 200, 300] and indexes will correspondingly be [[0, 2], [1], [3]]. The first element of indexes holds the indexes of the images at the first offset in offsets i.e 100.

Ultimately, now we can use this offsets array and assign scroll listeners for each of its value just like we did in the previous chapters. Once the condition in the listener is met we will loop through the corresponding elements in indexes and lazy load all the respective images one by one.

But for now you don't have to worry about writing code to get this step of efficiency work with the lazy loading algorithm, because there are more to follow. We will collectively form a single code at the end of this chapter whereby we merge all efficiency procedures to make our algorithm the most efficient it could be.

If you closely look at the section above you might notice one thing that it only deals with cases where the images are exactly at the same offset, not one pixel above, not one pixel below.

However you might already know that even images that are 30, or 40 pixels far away from an image can't rightly be considered as far away. For two images to be far away from each they should be at least some considered distance apart, which you get to decide in the code.

Well even if you chose 100, technically it is not wrong; since it is your all your choice! We have used this value because if you closely notice, even 100 pixels don't really denote that of a considerable distance.

This means that we shall further be reducing down the offsets array to one where no two consecutive values differ by greater than the distance you consider considerable.

For example if you choose 200px as the benchmark distance, then the offsets array [30, 70, 130, 400, 550] shall reduce down to [30, 400], in this step of making our algorithm efficient. Hence instead of the previous offsets array now we shall be using this new array. Remember that the code that reduces down the offsets array here shall also update indexes accordingly.

var a = 0;
var b = 0;
var o = 0;
var considerable = 200; // the considerable distance

while (a < (offsets.length - 1)) {
    o = offsets[a] + considerable;
    b = 1;
    while (offsets[a + b] <= o) {                
        indexes[a] = indexes[a].concat(indexes[a + 1]);
        indexes.splice(a + 1, 1);                
        b++;
    }
    a++;
    offsets.splice(a, (b - 1));
}

The third problem in our lazy loading algorithm is as follows: multiple scroll listeners are assigned for the multiple offset values. So what exactly is this problem? Let's discuss it.

Now as soon as you scroll even just one pixel on the web page, you'll be calling 10 listeners one after another! In this case, it won't hurt at all, as 10 concurrent calculations aren't that of a jank but what if the web page has 100 images all at different and considerably distanced offsets?

In this case each pixel scrolled will call 100 listeners one by one! Imagine scrolling 1000px quickly - you will be invoking 100,000 listeners! Clearly what you don't want.

So how can we solve this problem?

Well we can take advantage of the sorted offsets array and use just a single listener to track the scroll against the offsets.

The way we will implement this is that we will match the scroll position, given by window.pageYOffset, with the first element of offsets. If it is lesser than the first element then it will obviously be lesser than all elements down the array and hence we won't need to load anything.

However if it is greater than the first element then we will further need to check if it is greater than the second element as well. We will have to continue doing on this unless we find a value where the scroll is less than the next value, or we reach the end of the array.

If you keep proceeding this way, going from the top of the page towards the buttom, you will always match only the first element in offsets; never going any further than that.

However if your web page has some id link that directly takes you to some position at the bottom of the page then the steps we discussed above will come to live action. They will check exactly in after which offset does the value of pageYOffset lie and accordingly load all images for that very offset.

Following is the code to accomplish this task of switching from multiple listeners to just one single listener.

 // offsets and indexes processed from steps 1 and 2 above
function lazyLoad() {
    var i = -1;
    while (window.pageYOffset >= offsets[i + 1]) i++;
    if (i === -1) { return; }

    // remove respective elements from both arrays
    offsets.splice(i, 1);
    curIndexes = indexes.splice(i, 1); // image indexes to lazy load

    // iterate over all elements and lazy load each
    for (var a = 0, len = curIndexes.length; a < len; a++) {
        lazyImages[curIndexes[a]].src = lazyImages[curIndexes[a]].dataset.src;
    }
}

// add function in the following SINGLE scroll listener
window.onscroll = function() {
    lazyLoad();
}

lazyLoad();
// call function intially to load images above-the-fold
// without the need to scroll

Let's explain what is happening in this mess of a code.

1. The reason we create a seperate function, lazyLoad(), here is to be able to call it globally, with the page load (in line 22) to consider any images above-the-fold. If we were to not call this function globally, we couldn't get above-the-fold images lazy loaded without the need to scroll.
2. Anyways moving into the function, we first create a variable i that serves to provide us with the index of the desired offset (discussed in the discussion above). Using the while loop in line 4, we iterate over all offsets in the offsets array until we find a value that is greater than pageYOffset, or we reach the end of the array.
3. If we didn't find a match, and i remained as -1, we exit the function using return (in line 5).
4. If we found a match, then we remove the corresponding offset from offsets and the corresponding indexes array from indexes. Using this indexes array we iterate over all its elements and load them into view. This completes the logic and idea behind which we've made lazy loading - to load images at some point.

So as you can see in this way we can eliminate the usage of multiple listeners and consequently make our lazy loader way more efficient. Over to the last rectification.

The last thing left to rectify in our lazy loading algorithm is the direct call of the scroll handler on each subsequent pixel scrolled. So what is this?

Not only this but the quick scrolls will also call the scroll listener too frequently, making themselves as a potential candidate for performance degradation on low-tier devices.

In plain words, there's simply no stop to our algorithm. It doesn't wait for sometime before continuing on with its calculations. Rather it performs the calculations just at the speed at which we fire the scroll event, not considering whether certain images remain in the viewport for sometime or not before loading them.

This signifies the fact that the direct firing of the scroll listener is truly an inefficiency. Can you think of anything that can be used to prevent this?

Well we would have to go our old friend setTimeout()! If you don't know about this function consider reading Javascript Timers.

The whole lazy loading algorithm will go inside the timeout function which will then go inside the scroll handler. As a consequence this will cause every scroll event to first go through a timer before being able to execute the underlying lazy code.

Talking more about the working of this prodecure; in the scroll handler we'll create a timeout of 300ms with each call of the scroll event. If within this period of time another scroll event is dispatched by the user, the previous one will be canceled and a new one will be created for another 300ms.

Here's the code for the timed scroll event:

var time = 300; // 300ms delay
var timeoutFunc = null;

window.onscroll = function() {
    clearTimeout(timeoutFunc);
    timeoutFunc = setTimeout(function() {
        // lazy loading algorithm
    }, time);
}

The variable time holds the time delay for the timeout (in milliseconds) whereas timeoutFunc is given to hold the id of the setTimeout() function. In line 5, we clear the previous timeout in stack, and then in line 6, create a new one to be executed after another 300s.

In this way we make sure that whenever scrolling is done, the lazy algorithm will only be called once 300ms has passed since the last firing of the event.

And this marks the completion of all the efficiency steps we couldn't taken to improve out scroll based lazy loading algorithm. Following is the complete code after we've applie all the above measures to our previous algorithm.

Don't get panicked by looking at the length of this code - it's literally a mixture of everything you've understood and done yourself - there's nothing new!

var lazyConts = document.getElementsByClassName("lazy");
var lazyImages = document.getElementsByClassName("lazy_img");
var offsets = [-Infinity];
var indexes = [];
var time = 300;
var timeoutFunc = null;

function populateIndexes(offset, index, i) {
    if (offset > offsets[i]) {
        offsets.splice(i + 1, 0, offset);
        indexes.splice(i, 0, [index]);
        return true;
    }
    else if (offset === offsets[i]) { indexes[i - 1].push(index); }
    else {
        while (offset < offsets[i]) i--
        return populateIndexes(offset, index, i);
    }
}
function lazyLoad() {
    var i = -1;
    while (window.pageYOffset >= offsets[i + 1]) i++
    if (i === -1) return;
    offsets.splice(i, 1);
    curIndexes = indexes.splice(i, 1);
    for (var a = 0, len = curIndexes.length; a < len; a++) {
        lazyImages[curIndexes[a]].src = lazyImages[curIndexes[a]].dataset.src;
    }
}

var offset = 0;
for (var i = 0, p = 0, len = lazyConts.length; i < len; i++) {
    (function(i) {
        offset = lazyConts[i].getBoundingClientRect().top + window.pageYOffset - window.innerHeight;
        populateIndexes(offset, i, p) ? p++ : 0;

        // .loader code from previous chapter
        // reloader code from previous chapter

        lazyImages[i].onload = function () {
            loader.style.display = "none";
            lazyImages[i].classList.remove("unloaded");
            lazyImages[i].onerror = null;
        }
    })(i);
}

offsets.shift();
window.onscroll = function() {
   clearTimeout(timeoutFunc);
   timeoutFunc = setTimeout(function() {
      lazyLoad();
   }, time);
}
lazyLoad();

It's a sign off for now, but we'll come back in the next chapter with looking over a new technology to implement lazy loading - IntersectionObserver().