Мерцание изображения и предотвращение. Надлежащие стандарты кодирования

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

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

Должен ли я использовать функцию HTML5 для размещения тегов <noscript> в заголовке, а затем использовать отдельную таблицу стилей, чтобы установить непрозрачность и положение для окончательных настроек для пользователей без javascript? Это самое элегантное решение?

Я начал использовать библиотеку greensock (gsap) для TweenLite.from, так как я могу просто установить все в конечное состояние в css, но я получаю небольшое мерцание изображения/текста при первой загрузке страницы. Мне нравится это решение, потому что я могу установить все css так, как это будет для кого-то без javascript, и оно позволяет мне легко анимировать из точки в существующую точку, вместо того, чтобы работать в обратном направлении, как я должен делать с Javascript или jQuery. Но есть еще мерцание изображения, что не совсем приемлемо. Решит ли это предварительный загрузчик страниц?

Какова общепринятая практика для этого в наши дни? Я также беспокоюсь о SEO и последствиях установки вещей на visibility: hidden или display:none, а затем их анимации. Читает ли паук Google javascript?

Вот пример мерцания экрана и анимации, о которых я говорю.


javascript animation html css gsap
person Longblog    schedule 24.07.2014    source источник
comment
«но мне кажется, что это ужасная практика, если у кого-то отключен JavaScript» — обычно это делается путем добавления класса к элементу html с помощью скрипта, который встраивается непосредственно как первый элемент в head — встроенный скрипт , а не внешний, document.documentElement.className = 'hasJS' или что-то в этом роде, а затем используйте этот класс для указания форматирования, которое должно применяться только в том случае, если доступен JS, html.hasJS .foo { display:none; }   -  person CBroe    schedule 24.07.2014
comment
И этот класс добавляется достаточно быстро, чтобы предотвратить мерцание?   -  person Longblog    schedule 25.07.2014

Ответы (1)


arrow_upward
0
arrow_downward

Взгляните на HTML5 Boilerplate и Modernizr.

Он поставляется с умным решением, чтобы увидеть, включен ли у клиента JavaScript в CSS.

По умолчанию к тегу HTML применяется класс no-js, который затем заменяется Modernizr на js. Таким образом, вы можете соответствующим образом квалифицировать свои селекторы CSS.

Пример CSS:

.no-js .foo {  }
.js .foo {  }

Это должно выполняться достаточно быстро, чтобы клиенты с включенным JavaScript не видели no-js стилей.

Использованная литература:

person mlnmln    schedule 24.07.2014
comment
Это звучит как идеальное решение. Интересно, добавление целой библиотеки для решения одной проблемы — это немного излишество? Изменить: похоже, что комментарий CBroe к исходному вопросу объясняет, как делать именно то, что вы предлагаете, без необходимости во внешней библиотеке. - person Longblog; 25.07.2014
comment
Ну, вы спросили, какова общепринятая практика для этого в наши дни? HTML5 Boilerplate является стандартом де-факто для многих передовых отраслевых практик. вы можете развернуть свой собственный, настроенный модернизр, если хотите включить только свой конкретный набор функций. Если это не соответствует вашим потребностям, не стесняйтесь использовать решение @CBroe, которое по сути такое же. Что касается мерцания страницы: обязательно добавьте тег script в заголовок, чтобы он блокировал рендеринг страницы во время выполнения. - person mlnmln; 25.07.2014
comment
Хорошо, спасибо. Я бы, вероятно, потратил некоторое время на отладку, прежде чем понял, что это должно быть в голове. :) - person Longblog; 26.07.2014