Попробуй так:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<script src="http://yandex.st/jquery/1.7.1/jquery.js"></script>
<script>
$(document).ready(function() {
var img = document.getElementById('quickViewMainImage');
var inspirations = ['img/quickview_340/sneakers.jpg', 'img/quickview_340/sneakers1.jpg', 'img/quickview_340/sneakers2.jpg'];
$(img).on('load', function() {
$(this).fadeIn(500);
});
$('.inspiration_image').on('click', function(e) {
e.preventDefault();
var id = $(this).attr('id').substring(3);
$(img).fadeOut(500, function() {
img.src = inspirations[id];
});
});
});
</script>
</head>
<body>
<img style="display: inline;" id="quickViewMainImage" src="img/quickview_340/sneakers.jpg" alt="" />
<a id="img0" class="inspiration_image" href="http://gmx.com/">
<img src="img/swatches/sneakers_002.jpg" alt="test" title="test" height="60" width="60">
</a>
<a id="img1" class="inspiration_image" href="http://gmx.com/">
<img src="img/swatches/sneakers1.jpg" alt="test" title="test">
</a>
<a id="img2" class="inspiration_image" href="http://gmx.com/">
<img src="img/swatches/sneakers2.jpg" alt="test" title="test">
</a>
</body></html>
Твоя проблема была в очереди исполнения. Ты подменял у картинки src и сразу её показывал, ещё до того, как картинка была полностью загружена, я по сути добавил обработчик onLoad.
PS: клёвые кеды
