Отключаем трансформации CSS до завершения загрузки страницы
При использовании трансформаций CSS для структурных элементов страницы иногда получается, что переходы начинаются еще до завершения загрузки страницы. Такие элементы "выпадают" из шаблона.
Для исправления данного дефекта можно использовать следующий метод.
Добавляем класс "preload" к элементу body:
<body class="preload">
И отключаем для данного класса трансформации:
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
Некотрые браузеры не воспринимают директиву none. Если таковые присутствуют в вашем списке технического задания на проект, то можно использовать вот этот код:
.preload * {
-webkit-transition: all 0s linear;
-moz-transition: all 0s linear;
-ms-transition: all 0s linear;
-o-transition: all 0s linear;
}
Остается только убрать класс после загрузки страницы:
$("window").load(function() {
$("body").removeClass("preload");
});
Вот такими простыми действиями можно избавиться от рывков элементов при загрузке страницы. Было бы лучше обойтись без JavaScript, но ...
Комментарии:
Нету комментариев для вывода...