The short js script adds each alternate image that will be swapped on mouseover to the document.images array. I'm using the liquid syntax to increment the img(n) variable for each product. Without the preloader it takes about a second to load the image on mouseover. This way the whole page takes a touch longer to load but the effect is immediate…

shopify_preload_images.html

{% for product in collection.products %}
  <script type="text/javascript">
	// preload alternate image
	if (document.images) {
	    img{{ forloop.index }} = new Image();
	    img{{ forloop.index }}.src = "{{ product.images.first | product_img_url: 'large' }}";
		img{{ forloop.index }}.src = img{{ forloop.index }}.src.replace('_large.','_alt.');
	}
	</script>
  	<div class = "product">
		<div class = "image">
	      	<a href="{{ product.url | within: collection }}"
	       	title="{{ product.title }}">			
	       	<img src="{{ product.images.first | product_img_url: 'large' }}" onmouseover="this.src = this.src.replace('_large.','_alt.')" onmouseout="this.src = this.src.replace('_alt.','_large.')"
	       	alt="{{ product.title }}" /></a>
		</div>