Как настроить быструю загрузку стилей?

Question

[Anto]

Добрый день!

На сайте использую в детальной карточке товара слайдер infinitecarousel3 при открытии страницы мельком проскакивает не правильное отображение стилей тоесть фотка больше, но потом все становится на свои места. Пробовал включать Оптимизация CSS добавлял стили и js в header добавлял в компонент результата не принесло подскажите что можно сделать что бы они подключали сразу и отображалось правильно.

ResizeImageGet работает для фото.

Answer 1

[Алексей Емельянов]

Повесьте инициализацию слайдера на onload всей страницы, а не $(document).ready

Comments

[Anto]

Добрый день, Алексей.
В JS слайдера нету инициализации $(document).ready там $(function (){ тут код настройе слайдера}) ниже в этом же фале добавлены JS слайдера код который идет по умолчанию с слайдером если можно так сказать библиотека.

Если я правильно понял то onload нужно инициализировать таким способом onload="loadPage()" (сам js взять в функцию)?
Если да то пробовал слайдер так же работает даже чуть дольше.
Алексей подскажите пожалуйста может не так делаю что?

Сам js подключаю в компоненте битрикса весь код положил в script.js

[Алексей Емельянов]

В JS слайдера нету инициализации

не может быть.

там $(function (){ тут код настройе слайдера}) ниже в этом же фале добавлены JS слайдера код который идет по умолчанию с слайдером если можно так сказать библиотека

Покажите код

[Anto]

Алексей Емельянов: одним файлом подключена JS, тут полностью его разместил jsfiddle.net/YvCHW/9218

[Алексей Емельянов]

Ну вот же инициализация:

$(function(){

	$('#carousel').infiniteCarousel({
							transitionSpeed:250,
							displayTime: 6000,
							internalThumbnails: false,
							thumbnailType: 'images',
							customClass: 'myCarousel',
							progressRingColorOpacity: '0,0,0,.9',
							progressRingBackgroundOn: true,
							easeLeft: 'easeOutExpo',
							easeRight:'easeOutQuad',
							inView: 1,
							advance: 1,
							autoPilot: false,
							displayProgressRing: false,
							showControls: false,
							prevNextInternal: true,
							autoHideCaptions: true
	});
	
});

замени это на :

$(window).load(function(){

	$('#carousel').infiniteCarousel({
							transitionSpeed:250,
							displayTime: 6000,
							internalThumbnails: false,
							thumbnailType: 'images',
							customClass: 'myCarousel',
							progressRingColorOpacity: '0,0,0,.9',
							progressRingBackgroundOn: true,
							easeLeft: 'easeOutExpo',
							easeRight:'easeOutQuad',
							inView: 1,
							advance: 1,
							autoPilot: false,
							displayProgressRing: false,
							showControls: false,
							prevNextInternal: true,
							autoHideCaptions: true
	});
	
});

[Anto]

Алексей Емельянов: Спасибо, JS плохо знаю, но результат не поменялся, Буду искать поблещу.

[Алексей Емельянов]

ANTON K.: может тогда проблема не в слайдере, а в вёрстке. Попробуй закомментировать инициализацию слайдера и посмотреть как будет выглядеть страница.

[Anto]

Алексей Емельянов: я пробовал распадается все, я то же подумал только про CSS. Буду разбираться, Спасибо за помощь.