jQuery и CSS -> откладывать показ

Question

У меня есть карусель, реализованная с помощью jQuery.

Иногда у меня на странице появляются другие вещи, которые могут занять некоторое время, и в результате карусель начинает отображаться без CSS-рендеринга. Это дает ряд всех изображений в карусели, просто отображаемых на странице.

Дайте ему ~ 0,2 с, и все хорошо, т. Е. Включается CSS, и карусель отображается правильно.

У меня вопрос, есть ли способ обойти это или даже «стандартный» способ отложить показ карусели, пока мы не убедимся, что остальная часть страницы загружена.

Карусель уже настроена для загрузки в document.ready.

Answer 1

Если вы добавите все изображения с помощью javascript, он вообще ничего не отобразит для пользователей, у которых отключен javascript. Поэтому, если ваша карусель отображается слишком рано, возможно, вам нужно переместить скрипт, который вызывает вашу карусель, в конец страницы.

Answer 2

при загрузке страницы добавляет класс js к телу,

не ограничивать карусель только пользователями с включенным javascript, повторить эти изображения с

.js .imgParent > img {
   display: none
}

тогда вы можете ссылаться на эти изображения в вашем javascript и включать их снова (пользователям без javascript будут показаны обычные изображения)

Answer 3

Вы ничего не сказали о том, как реализована карусель; как выглядит html-код, какой плагин jquery вы используете, и как выглядит css, поэтому довольно сложно ответить на вопрос.

Звучит так, как будто вы конвертируете теги изображений на странице в карусель с помощью jquery. Если все изображения находятся внутри одного и того же div, просто скрыть div, используя display: hidden. Если вы хотите, чтобы они были скрыты до загрузки css, вам нужно применить этот параметр css непосредственно к тегу div в качестве атрибута.

Лучшее решение - добавить изображения с помощью javascript / jquery после загрузки страницы. Таким образом, они не отображаются в виде строки до того, как css или jquery будут готовы.