Есть ли способ заставить браузер ждать загрузки страницы, прежде чем показывать какой-либо ее контент?
У меня есть веб-страница с несколькими анимациями. В первый раз, когда он загружается, анимации отрываются и выглядят невероятно неправильно, потому что контент, который они оживляют, все еще загружается. Мне нужно сначала загрузить все, чтобы анимация могла выполняться плавно. Это возможно?
Анимация - это анимация CSS3.
благодаря
$(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 */
}
$(window).on('load'
- не подходящее время для запуска. Возможно, вы сможете начать раньше или захотите подождать еще дольше, в зависимости от того, как много происходит. A Хороший способ ускорить событие load
- это задержать загрузку ресурсов, которые не требуются немедленно (например, вещи, которые находятся за пределами экрана).
$(window).load(function() {
/* here you can use some "addClass" functions. Once added they trigger your CSS animations */
});