Usage of image preloading for color swatch operation

Color Swatch is often a requirement for Magento Stores. You can find lots of Color Swatch Extensions and tutorials on the internet. Most of them are slow in speed in terms of swatching the image. So I am sharing some tips on overcoming that.

You just have to place the following code in app/design/frontend/*/*/catalog/product/view/media.phtml:

<script type="text/javascript">
jQuery(function(){
	<?php
	$count = 1;
	foreach ($this->getGalleryImages() as $_image): ?>
		var image<?php echo $count; ?> = jQuery('<img />').attr('src', '<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>');
	<?php
		$count++;
	endforeach;
	?>
});
</script>

Notes: We have used the concept of image preloading using jQuery:

$('<img />').attr('src', $imageUrl)

By Preloading an image means loading an image in browsers cache so that when that image is requested it will be immediately displayed from the cache and hence making the mouseover, swatch operation, etc extremely fast.