Javascript-форум - Мерцание при hide().html

Добрый вечер!

Имею вот такой скрипт для onclick

<script>
	function showColor(t, idImg, color, colorText, title) {
	$('#' +idImg).hide().html('<img class="responsive-img" alt="'+title+' '+colorText+'" src="'+color+'">').fadeIn(500);
	$('#' +idText).hide().html('<span class="color-text-settins">'+colorText+'</span>').fadeIn(500);
	}
</script>

Место замены картинки

<div id='11' class="row">
	<div class="car-img-wrap car-img-1">
		<img class="responsive-img" src="img/tovar/transformers_black.png">
	</div>
</div>

Место замены текста не привожу, т.к. схоже.

Замена:

<div class="case-color-item"><a href="javascript:void(0)">
	<img onclick="showColor(this,'11','img/tovar/transformers_black.png','11','Черная молния')" src="img/colors/black_lightning.jpg"></a>
</div>

В итоге при нажатии img/colors/black_lightning.jpg видно, как подгружается новая картинка, т.е. мерцание - место в 300px x 300px, размер картинки, схлопывается со смещением соседних элементов и разворачивается обратно, под новую картинку.

Насколько я понимаю это связано с кэшем и проблема решается подгрузкой сразу всех картинок, где-нибудь на этапе генерации стартовой страницы, а не по одной, во время срабатывания события onclick.

Можно ли решить проблему оставив вариант с заменой кода с помощью hide().html? Пробовал вариант с find(имя класса), мерцания нет, но не смог передать id т.к. от них пока не могу избавиться.

Попробовал добавить в html все картинки в одно место и скрыть их классом hidden. Мерцание осталось. Видимо дело в hide().hml. Есть ли еще варианты?

Спасибо!