Lazy Loading Error Handling

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.

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.

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.

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.

This is exactly what we implement in the code below:

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 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.

Error handling loader