Errors can creep in!

Whenever developing an application or a program, for the web or the desktop, we as developers have to think of possibly any errors that can creep in our hours of works. This applies to our lazy loader as well.

In this chapter we will consider a potential error that can happen while we load an image and see how to work around it using JavaScript onerror event.

Detecting the error

So what we need to start thinking on with is that what can possibly go wrong in our lazy loader? Where can potentially an error lie. Try to find an answer to this question - it's fairly easy and lies in the concept of images.

Let's see the answer together.

If we give an invalid src to an image in HTML, it will throw an error. In addition to this, if the network connection is disabled and there is no internet available even then the browser will thrown an error when trying to request for the image.

For our loader, both these errors will be thrown in the onerror event of the .lazy-img element, which we can listen in our JavaScript code.

But before listening to the event, let's think together what to do after an error happens - how to handle the error?

For this we can either simply just log a message "Failed to load the image" and leave it there, or add a reload image button to the failed image so that a user can click it and try to reload the image. We'll go with the latter since it enables an image to be re-requested for, once it fails.

Dealing with the error

Starting with the reload button, following we layout its HTML to better understand how it would work once encapsulated in a string in JavaScript.

We've used Font Awesome's Icon Pack to get the .fa-redo icon .

<div class="icon"><i class="fas fa-redo"></i></div>

Following we give a padding to the reload icon to make its clickable area larger.

.loader .icon i {
    padding: 50px;
}

And this sets up the structure for our reload button - now over to its scripting.

So the idea is that when we click the reload button, it retries to load the image. If the image fails again, we bring in the reload button again; if it successfully reloads, we remove the onerror event from the corresponding image.

This is exactly what we implement in the code below:

This example is curated as if we have a single image only to lazy load. For multiple images see the next chapter.
lazyImage.onerror = function(e) {
    loader.innerHTML = '<div class="icon" onclick="reloadImage()"><i class="fas fa-redo"></i></div>';
}

When an error occurs, this code replaces the loading icon inside .loader with a reload icon. Only once we click this reloading icon does anything proceed further in reloadImage().

What we need to do in this function is to add the loading icon again to the failed image and re-request it by re-adding the src attribute.

function reloadImage() {
    // add the previous loading icon again
    loader.innerHTML = '<div class="icon"><span></span><span></span><span></span></div>';

    // re-request the image
    lazyImage.src = lazyImage.dataset.src
}
The markup in line 3 here is for our loading icon made using HTML and CSS in the Loading Icons chapter.

The last thing we can do, so now that we've begun to develop an error handling code, is to remove the onerror event from a lazy image once it loads successfully.

lazyImage.onload = function() {
   loader.style.display = "none";
   lazyImage.classList.remove("unloaded");

   // remove onerror handler
   lazyImage.onerror = null;
}

And this completes another yet amazing feature to our lazy loader.

To check it out you should first open up the following link in your browser, then after that disable your internet connection and finally scroll down. This will throw an error and show a reloading icon consequently. Now enable your internet and then press the reload button. If you see the image loaded give a thumbs up to yourself!

Error handling loader