jQuery useful preload image effect

The idea is to preload an image first to browser cache, then display it when completely loaded using jQuery. We can also make it more presentable to viewers by adding a fade in effect after we preload image to browser cache.

 

Create the html holder for the preload image

DEMO: How to preload image using jQuery - Javascript


First step is to lay down the html markup. We also need include jQuery library for use to use some of it’s functionalities.

The Javascript codes:

$(function(){
LoadImage();
$("#load_img").click(function(){
$("#current_img").remove();
$('#img_holder').addClass('loadit');
LoadImage();
});
function LoadImage(){
var img_url = $("#img_url").val();
if(img_url == ''){
img_url = "images/wetrepubliccomp7c.png";
}
var img = new Image();
$(img).load(function(){
$(this).hide();
$('#img_holder').removeClass('loadit').append(img);
$(img).fadeIn();
}).attr('src',img_url).attr('id','current_img');
}
});

To preload an image we will focus on the LoadImage() function. This will server as the main function that drives this tutorial.

var img = new Image();

The idea is to create an Image Object using Javascript, and control the preloading with jQuery using load event.

$(img).load(function(){
//execute when the event is triggered.
}).attr('src',img_url).attr('id','current_img');

We also need to supply the image attributes first before we preload the image. I added the image source using jQuery function .attr(‘src’,img_url). You can add more attributes on the image like class or id if you like.

$(this).hide();
$('#img_holder').removeClass('lo

We will add an event hadler on .load() to control image preloading. I will add a fade in effect to the image before i show it to viewer. Make sure it’s hidden that’s why i called $(this).hide(); , then we will place our img object to $(‘#img_holder’) using .append(img) and use the $(img).fadeIn(); to display it with a fade in effect.

How to call the function

LoadImage();

On a normal page load just call the LoadImage(); function. Be sure to set var img_url with your default image.

$("#load_img").click(function(){
$("#current_img").remove();
$('#img_holder').addClass('loadit');
LoadImage();
});

You can also trigger it on a click event, if you have a project that requires user interaction before you preload an image.

Note:

Load event doesn’t have an error handler built-in, but if you really want to validate first if the image source before you load it, you can use the jQuery ajax request to check it.

$.ajax({
url: img_url,
type:'HEAD',
error:
function(){
//Image Not Found!
},
success:
function(){
//do stuff here if image exist
}
});

Download: http://www.htmldrive.net/items/download/1080

adit').append(img);
$(img).fadeIn();

Be Sociable, Share!

4 thoughts on “jQuery useful preload image effect

  1. Heya i am for the primary time here. I came across this board and I find
    It truly useful & it helped me out a lot. I’m hoping to provide one thing back and aid others like you aided me.

Leave a comment