How to check Broken Image with jQuery and AJAX

The images which are wouldn’t successfully load on the web page will show nothing when the source does not exist.

It looks bad when there are many images and some of them are missing.

For solving this you need to look through all the pages and find the broken images and fix them manually time to time. It is the time-consuming process.

What in the demonstration?

I show you with two examples, How you can automatically detect the broken images and replace with another image.

  • In the first one, I am using the jQuery, and
  • In the second, using AJAX with jQuery

How to check broken image with jQuery and AJAX


Contents

  1. With jQuery
  2. With jQuery and AJAX
  3. Demo
  4. Conclusion

1. With jQuery

When image successfully not loads on the page then error event gets triggered. We use this to replace the image source with the default image.

Example

$(document).ready(function(){
 $("img").bind("error",function(){
  // Replacing image source
  $(this).attr("src","images/noimage.png");
 });
});

With JavaScript

You need to define onerror attribute in the image elements and perform image replace operation.

<img onerror='this.src="images/noimage.png"' src='image.png'/>

Problem

The both of codes work fine until the replacing image exists on your server. But, by chance, it gets removed or the name of the image is renamed in this case when you load the page you see flickering effect on the image which does not exist.

This is because when the image does not exist then it triggered error event now when you try to replace the image with another image which also doesn’t exist then it again trigger error event.

It becomes the never-ending loop.

For solving this I am using AJAX.


2. With jQuery and AJAX

Looping through all image element and sending AJAX request for the check. If the source doesn’t exist then it goes to the error function. From their handle the image.

If the replacing is also doesn’t exist then hiding the image.

Example

$(document).ready(function(){
 // Looping through all image elements
 $("img").each( function () {
  var element = $(this);
 
  $.ajax({
   url:$(this).attr('src'),
   type:'get',
   async: false,
   error:function(response){
 
    var replace_src = "images/noimage.png";
    // Again check the default image
    $.ajax({
     url: replace_src,
     type:'get',
     async: false,
     success: function(){
      $(element).attr('src', replace_src);
     },
     error:function(response){
      $(element).hide();
     }
   });
  }
 });
 });
});

3. Demo

Here, the third image is not available on the server.


4. Conclusion

In this tutorial, I discussed How to resolve broken image source using jQuery. For the detecting image is exists or not I used error event from their updating the image source with some other or default image.

I also show How you do it with AJAX.

I hope this may help you and if you know some other better solution to check the broken images source then let me know in the comment section.

banner

Related Post

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *