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