При смене css-файла моргает экран

vovannumber1

Помогите плиз!

Хочу подстроить чтобы сайт подгружал нужный стиль под разные разрешения браузера.
Но в момент смены одного стиля на другой, экран "мигает" - пока подгружается css-ник и картинки из него.

посоветовали вот что:

есть тег <div class="main"> в котором содержится сайт.
Сделай его изначально невидимым style="display:none".
После того, как загрузится css - указывай значение видимости.

Вот только как это сделать?
Есть ли другие варианты? Помогите пожалуйста, если можно поподробнее.

Код: Выделить всё

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" href="style1.css"  type="text/css" id="stylesheet" media="screen"  /> 
<link rel='icon' href='/favicon.ico' type='image/x-icon' />
<link rel='shortcut icon' href='/favicon.ico' type='image/x-icon' /> 
<meta name="allow-search" content="yes"/>
<meta name="description" content="
" />
   <meta http-equiv="distribution" content="global"/>
   <meta name="robots" content="all"/>
  <title>Главная Тучково Монолит товарный бетон, опоры лэп, дорожные плиты в розницу, строительные материалы, железобетонные изделия. </title>
<script  type="text/javascript"  src="javascript.js"></script>
<script  type="text/javascript">
window.onload  = changeCss;

</script>

Вот сам скрипт:

Код: Выделить всё

// JavaScript Document
function  changeCss() {
   var w =  screen.width;
           
   if (w <=  '1024')
   {
      document.getElementById("stylesheet").href="style1-1000.css";
   }
   else
   {
      if (w <= '1152' )
      {
         document.getElementById("stylesheet").href="style1-1152.css";
      }
      else
      {
         if (w <= '1280' )
         {
            document.getElementById("stylesheet").href="style1-1260.css";
         }
         else
         {
            if (w <= '1440')
            {
               document.getElementById("stylesheet").href="style1-1440.css";
            }
            else
            {
               if (w <= '1600')
               {
                  document.getElementById("stylesheet").href="style1-1600.css";
               }
               else
               {
                  if (w <= '1680')
                  {
                     document.getElementById("stylesheet").href="style1-1680.css";
                  }
                  else
                  {
                     if (w <= '1776')
                     {
                        document.getElementById("stylesheet").href="style1-1776.css";
                     }
                     else
                     {
                        if (w <= '1920')
                        {
                           document.getElementById("stylesheet").href="style1-1920.css";
                        }
                     };
                  };
               };
            };
         };
      };
   };
};

ну если совсем правильно делать, то зависимость от разрешения можно реализовать в самом css

Код: Выделить всё

@media screen and (min-width:1920px) {
    /* тут стили  */
}
@media screen and (max-width: 1776px) {
    /* тут стили  */
}
@media screen and (max-width: 1680px) {
    /* тут стили  */
}

...

@media screen and (max-width: 1024px) {
    /* тут стили  */
}

для IE младше 9й версии. поддержка такого css добавляется скриптом

Код: Выделить всё

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

vovannumber1

Спасибо за ответ Distructor. Я сделал так, но в эксплорере все-равно мигает, как этого избежать?
Могу дать название сайта.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<link rel="stylesheet" media="screen and (min-width: 400px) and (max-width: 1024px)" href="style2-1000.css" />
<link rel="stylesheet" media="screen and (min-width: 1024px) and (max-width: 1152px)" href="style2-1152.css" />
<link rel="stylesheet" media="screen and (min-width: 1152px) and (max-width: 1280px)" href="style2-1260.css" />
<link rel="stylesheet" media="screen and (min-width: 1280px) and (max-width: 1440px)" href="style2-1260.css" />
<link rel="stylesheet" media="screen and (min-width: 1440px) and (max-width: 1600px)" href="style2-1440.css" />
<link rel="stylesheet" media="screen and (min-width: 1600px) and (max-width: 1680px)" href="style2-1600.css" />
<link rel="stylesheet" media="screen and (min-width: 1680px) and (max-width: 1776px)" href="style2-1680.css" />
<link rel="stylesheet" media="screen and (min-width: 1776px) and (max-width: 1920px)" href="style2-1760.css" />
<link rel="stylesheet" media="screen and (min-width: 1920px) " href="style2-1920.css" />
<meta name="allow-search" content="yes"/>
<script type="text/javascript" src="javascript2.js"></script>
<script type="text/javascript">
window.onload = changeCss;
</script>

я имел ввиду что надо собрать все css файлы в один, чтобы не тратилось время на его подгрузку и общие части которые не зависят от разрешения (например картинка для фона, цвет шрифта и т.п.) надо вынести отдельно.
т.о. при смене разрешения будут только подгружаться новые картинки