Советы по изящной загрузке веб-страницы?

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

Может ли кто-нибудь рекомендовать какие-либо методы, чтобы начальная загрузка страницы была выполнена более изящным образом?

  • Как играть в Android в Android-телефоне
  • Запрос MongoDB по заполненным полям
  • Извлечение текста из contentEditable div
  • Как браузеры выполняют javascript
  • Лучший способ алфавитно-цифровой проверки в Javascript
  • Как правильно передать json-объект на сервер флеши, используя jquery ajax
  • 4 Solutions collect form web for “Советы по изящной загрузке веб-страницы?”

    Это известно как FOUC – вспышка незакрепленного контента.

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

    Однако, вместо того, чтобы стремиться к graceful degradation вы можете подумать о попытке progressive enhancement чтобы javascript мог добавлять функциональность на ваш сайт, а не полагаться на него для функциональности и внешнего вида.
    См. Здесь хорошее сообщение в блоге об относительных достоинствах двух подходов.

    Используйте CSS, чтобы установить начальное состояние отображения в скрытое ( display:none или visibility:hidden , по мере необходимости) и jQuery / JavaScript, чтобы показывать их позже (либо путем прямого стилирования, либо изменения классов, которые они отображают.

    Вы можете установить display:none CSS display:none и visibility:hidden по умолчанию скрыты ваши скрытые элементы.

    Как насчет добавления наложения и скрыть его при загрузке страницы? 🙂 попробуйте добавить div с id overlay или это зависит от вас и создайте его так:

     #overlay{ width:100%; height:100%; position:fixed; top:0; left:0; z-index:99 } направо #overlay{ width:100%; height:100%; position:fixed; top:0; left:0; z-index:99 } 

    Это скроет весь ваш контент. И после завершения загрузки веб-страницы скройте его с помощью jquery:

     $(window).load(function(){ $('#overlay').animate({opacity:'0'}).css('zindex','-10'); }) 
    JavaScript делает сайт умным, красочным и простым использованием.