Отключаем трансформации CSS до завершения загрузки страницы

При использовании трансформаций CSS для структурных элементов страницы иногда получается, что переходы начинаются еще до завершения загрузки страницы. Такие элементы "выпадают" из шаблона.

Для исправления данного дефекта можно использовать следующий метод.

Добавляем класс "preload" к элементу body:

И отключаем для данного класса трансформации:

.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, но ...


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/qKZGNYj2lfI/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Отключаем трансформации CSS до завершения загрузки страницы | | 2012-06-19 11:58:04 | | Статьи Web-мастеру | | При использовании трансформаций CSS для структурных элементов страницы иногда получается, что переходы начинаются еще до завершения загрузки страницы. Такие элементы выпадают из шаблона.Для | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: