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.
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.
onerror
event from the corresponding image.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.