Сначала загрузите страницу, затем отобразите / анимируйте контент

0

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

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

Анимация - это анимация CSS3.

благодаря

  • 0
    Вы пробовали событие .load ().?
  • 0
    Какие анимации? вспышка? GIF?
Показать ещё 7 комментариев
Теги:
browser
animation

2 ответа

1
Лучший ответ
$(window).on('load', function() {
    // do stuff
});

дождитесь загрузки страницы и внешних ресурсов, таких как изображения, перед запуском.

Если анимация - это анимация CSS, используйте классы или другие селектор и присоедините их, когда окно загрузилось, чтобы начать анимацию

$(window).on('load', function() {
    $('.animated').addClass('start');
});

и в CSS

.animated {
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}

.start {
   color: red;
   left: 100px;
   /* whatever you'd like to animate */
}
  • 0
    Этот ответ очень удачный. Я хотел бы добавить, что, возможно, $(window).on('load' - не подходящее время для запуска. Возможно, вы сможете начать раньше или захотите подождать еще дольше, в зависимости от того, как много происходит. A Хороший способ ускорить событие load - это задержать загрузку ресурсов, которые не требуются немедленно (например, вещи, которые находятся за пределами экрана).
  • 1
    @FritsvanCampen - Это правда, в зависимости от сайта, может быть много способов сделать это, так что добавить ответ к ответу немного, но если загрузка изображений и т. Д. Не проблема, то document.ready, вероятно, Лучшее время для запуска анимации, и если есть другие ресурсы, которые не загружены в window.onload, возможно, потребуется обработчик события загрузки для этих ресурсов и т. д. Это должно как минимум дать представление о том, как запускать CSS анимации с помощью JavaScript с использованием различных селекторов.
0
$(window).load(function() {
    /* here you can use some "addClass" functions. Once added they trigger your CSS animations */
});
  • 0
    Установите несколько классов, посвященных анимации, и добавьте их в свой код таким образом, чтобы они запускались только тогда, когда все остальное загружено.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню