Image preloading in JS

I've found this awesome way to load images on the web.

//preloading

$(function () {
$('.preload').hide();//hide all the images on the page $('.play,.magnifier').css({opacity:0}); $('.preload').css({opacity:0}); $('.preload').addClass("animated"); $('.play,.magnifier').addClass("animated_icon");
});

var i = 0; //initializevar cint=0;
//Internet Explorer Fix
$(window).bind("load", function() {

//The load event will only fire if the entire page or document is fully loaded

var cint = setInterval("doThis(i)",70);//500 is the fade in speed in milliseconds});
function doThis() {

var images = $('.preload').length; //count the number of images on the page
if (i >= images) {
// Loop the images
clearInterval(cint); //When it reaches the last image the loop ends
}

$('.preload:hidden').eq(i).fadeIn(500); //fades in the hidden images one by one $('.animated_icon').eq(0).animate({opacity:1},{"duration": 500}); $('.animated').eq(0).animate({opacity:1},{"duration": 500}); $('.animated').eq(0).removeClass("animated"); $('.animated_icon').eq(0).removeClass("animated_icon"); i++;//add 1 to the count
}