Добрый вечер!
Имею вот такой скрипт для 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. Есть ли еще варианты?
Спасибо!