Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.08.2017, 01:54
Новичок на форуме
Отправить личное сообщение для DemonGuards Посмотреть профиль Найти все сообщения от DemonGuards
 
Регистрация: 28.07.2017
Сообщений: 6

Мерцание при 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. Есть ли еще варианты?

Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 18.08.2017, 09:04
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,952

Можно загрузить новое изображение за пределами экрана пользователя, текущему изображению выставить размеры нового, которое подгрузили за пределы экрана и сменить старое изображение новым.
Метод hide заменить методом fadeTo(0,0), думаю это исключит "мерцание".
Ответить с цитированием
  #3 (permalink)  
Старый 18.08.2017, 11:39
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Для этого и нужны спрайты, чтобы не ждать загрузку новой картинки.
Ответить с цитированием
  #4 (permalink)  
Старый 18.08.2017, 12:23
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,952

j0hnik, изображения товаров тоже в спрайт объединять предлагаешь?
Ответить с цитированием
  #5 (permalink)  
Старый 18.08.2017, 12:32
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от Nexus Посмотреть сообщение
j0hnik, изображения товаров тоже в спрайт объединять предлагаешь?
разве что спрайт галереи одного товара.
Разные товары конечно нет.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена класса у отдельного div при нажатии на ссылку Maxim-Ra Элементы интерфейса 6 15.02.2015 12:20
Мерцание блоков при при скрытии vovammm Общие вопросы Javascript 4 04.05.2014 10:50
Изменение прозрачности при клике AJIUK jQuery 8 09.03.2014 15:00
при нажатии на раздел меню поворачивается маркер Сергей545 Элементы интерфейса 5 08.12.2013 21:15
проблема с событиями при работе с Ext.extend slavik27 ExtJS 1 04.09.2011 13:05