Quick jQuery Projects for Web Designers

2.4 Handling Broken Images

Hello and welcome back. In this lesson we're gonna talk about how to handle broken images in jQuery. What we're gonna do is we're going to detect when an image is broken and when it is we're simply going to use a replacement image to take its place. Because having a broken image on your website, no matter how well-designed your site may be, is going to be a real eyesore. So what we're gonna do in this lesson is we're going to rely on the error event. Because whenever a URL that an iImage is pointing to is broken, whenever nothing exists at that URL, it throws an error. So, we can handle that error by simply replacing the source attribute of the image in question whenever it throws an error. That way we can apply this to all image tags on the page. Or we can apply it to a certain set of image tags if we just wanna look at image tags that are inside a div with a class of product, we could do that as well. Or we could do this with every image on the page. Now, it might get tricky if you do it with every image on the page, because you've got your logo, you've got other images that are different sizes, and things like that. So you might wanna handle those more specifically. But for something like this for a product where you're gonna have the same size image in every place, this would be a good technique to use. One common use of this might be, if you have users on your website with profile images, maybe somebody doesn't upload a profile image, or maybe they're pointing to another site to a profile image that no longer exists. This would be a good way to handle that, you could replace any broken profile images with a default avatar image or something like that. Now in this particular lesson we're gona be pointing to a placeholder image using placeholder.com. And this is very easy to use. If you go to placeholder.com you can take a look at how it works. We can even add text to our placeholder images which is what we're gonna do in this lesson by saying text= and then whatever text you wanna use. And if you have any spaces in there, you would just replace them with a plus sign. But let's go back to our pen here. And you can find the URL for the starting pen in your course notes. Once you open that up, let's go ahead and create a fork, and we'll make all of our changes on this new forked version. So if we look at our HTML, we have three divs, each of them has an h3, a paragraph, and an image in them. And then in our CSS, you can take a look at that to see how these are styled and structured. And then we'll jump into our JavaScript to make this work. Now this is very easy to do. What I'm gonna do is I'm gonna create a jQuery selector that's pointing to any images that are inside one of these product items. So these product divs have a class of product, so we're gonna say .product img. So that will point to any images inside of a div of the class of product. And we're going to create an error event handler, and the way we do that is we type .on. And then inside parentheses and inside quotation marks we're gonna say error. And then it will say comma space and then we'll point to our function. Okay, so inside this function all we need to do is to add some code that's going to replace the source attribute of whatever image through that error. And in order to point to this specific image that threw that error, inside our event handler function, we're gonna point to $ and then inside parentheses, the word this. And we're gonna use the jQuery attr method to replace an attribute or to assign a value to an attribute. And we're dealing with the source attribute, or the src attribute. So we'll say src inside quotation marks. And then after the quotation marks, comma space. And then inside the quotation marks, the URL of the image we want to replace it with. So I've got the image URL on my clipboard, I'm just gonna paste it. And you can see what these placeholder URLs look like. We have via.placeholder.com/ and then the dimensions, 160 by 120, and then ?text= and then whatever text you want, and we can see that that text has been replaced. And it has only replaced the images that are broken. You'll notice these first two are not throwing any errors so they're not being replaced with that image coming soon text. But if we were to jump into our HTML for one of those and just mess up the URL, we'll see that broken image text there. So this will very smoothly handle any broken images that may or may not be on your page. So hopefully that gives you just another way to improve the user experience on your website. Thank you for watching and I'll see you in the next lesson.