Magento Themes and Magento Extensions

Usage of image preloading for color swatch operation

Share

Color Swatch is an often requirement for Magento Stores. You can find lots of Color Swatch Extensions and tutorials in 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:

1
2
3
4
5
6
7
8
9
10
11
12
<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:

1
$('<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.

Leave a Reply

You must be logged in to post a comment.