Image Preloader with jQuery and wordpress

gistfile1.js

/*<![CDATA[*/	
		$(document).ready( function(){
			var images = $(document).find('.to_load img');
			$.each( images, function( idx, value){
				var original = $(this);
				$(this).addClass('hidden');
				$('<span class="img_loader">&nbsp;</span>').insertBefore( original );
				var src = $(this).attr('src');
				var $img = new Image();
				$($img).delay( 500 ).load( function(){
					$(this).css('display','none').insertBefore( original );		
					original.remove();
					$(this).fadeIn( 250, function(){
						$(this).siblings('.img_loader').fadeOut();
					})
				}).attr('src', src);
			});
		});	
	/*]]>*/

gistfile2.css

.img_loader{
	background: url("images/loading.gif") no-repeat scroll center center transparent !important;
}
.post .thumbnail{
    margin: 15px 0 0;
    position: relative;
}
.post .thumbnail span{
    background: url("images/post-thumb-mask.png") no-repeat scroll 0 0 transparent;
    height: 220px;
    left: 0;
    position: absolute;
    top: 0;
    width: 625px;
}
.post .thumbnail a{
	height: 220px;
	width: 625px;
	display: block;
}

gistfile3.php

<?php if ( has_post_thumbnail( $post_id ) ) : ?>
	<div class="thumbnail to_load">
		<span class="mask">&nbsp;</span>
		<?php $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large'); ?>
		<a title="<?php the_title(); ?>" href="<?php the_permalink() ?>">
			<img src="<?php bloginfo('template_url'); ?>/includes/thumb.php?src=<?php echo $large_image_url[0];	?>&w=625&h=220&zc=1" alt="post thumbnail" />									
		</a>
	</div>	
<?php endif; ?>