8 Handy jQuery Code Snippets For Handling Images


Here are 8 handy jQuery code snippets for handling images. These snippets show how to handle broken images, showing loading images when the main image is downloading, preloading images, adding hyperlinks to your images, and changing images extensions.

1. Hide Broken Images

If the image path is changed then the image will not load. So you can hide such images from your webpage using following jQuery code.

<pre class="brush:javascript">
$(document).ready(function() {
  $('img').error(function() {
    $(this).hide();
  });
});
</pre>

2. Remove Broken Images

You can also remove such images from DOM using following code:

<pre class="brush:javascript">
$(document).ready(function() {
  $('img').error(function() {
    $(this).remove();
  });
});
</pre>

3. Replace Broken Image URL with Other Image URL

And if you don’t wish to hide/remove the images and want to replace with any other image source, then use following code. This will set the src attribute of image a to newer path.

<pre class="brush:javascript">
$(document).ready(function() {
  $('img').error(function() {
    $(this).src = "/images/noimage.gif";
    $(this).onerror = "";
  });
});
</pre>

4. Add Hyperlinks to All Images

If you want to add hyperlinks to images then use below code:

<pre class="brush:javascript">
$(document).ready(function() {
  $('img').each(function ()
  {
     var currentImage = $(this);
     currentImage.wrap("<a href='" + currentImage.attr("src") + "' </a>");
  });
});</pre>

5. Show Loading Image when Main Image is Loading

If you have large images on your websites and that take time to load, then you can display a small loading image until the time image is fully loaded. The below jQuery code will display a single loading image for all large images.

<pre class="brush:javascript">
$(document).ready(function(){
   $('#imgLoader').show();
   var totalImages = $(".imgClass").length;
   var iLoaded = 0;
   $(".imgClass").each(function ()
   {
     $(this).bind("load", function()
     {
       iLoaded++;
       if(iLoaded == totalImages)
       {
          $('#imgLoader').hide();
       }
       $(this).attr('src', $(this).attr("src"));
    });
  });
});
<pre>

6. Change All Image Extensions from PNG to JPG

If the extensions of all your images are changed (for any reason) then changing extension in source code will be a nightmare. To change the extension of all your images from png to jpg, use following code.

<pre class="brush:javascript">
$(document).ready(function(){
  $('img[src$=".png"]').each(function(index,element) {
    element.src = element.src.replace('.png,'.jpg);
  });
});
</pre>

7. Preloading Images

The jQuery code below will preload the images which you may need to use later on.

<pre class="brush:javascript">
$.preloadImages = function() {
  for (var i = 0; i < arguments.length; i++) {
    $("<img />").attr("src", arguments[i]);
  }
}
$(document).ready(function() {
  $.preloadImages("hoverimage1.jpg", "hoverimage2.jpg");
});
</pre>

8. Resizing Images Proportionally 

The jQuery code below will resize the image based on resolution. Here the max_size variable is set to the maximum height or width.

<pre class="brush:javascript">
$("img").each(function(i) {
  if ($(this).height() > $(this).width()) {
    var h = max_size;
    var w = Math.ceil($(this).width() / $(this).height() * max_size);
  } else {
    var w = max_size;
    var h = Math.ceil($(this).height() / $(this).width() * max_size);
  }
  $(this).css({ height: h, width: w });
});
</pre>
SHARE

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..