VPF::динамически менять подключаемый js и css файлы

inohodec

Дата 11.9.2012, 12:23 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 151
Регистрация: 1.12.2004

Репутация: нет
Всего: 2

Всем привет

Нужно динамически менять подключаемый js и css файлы.
Т.е. у меня на страничке есть возможность переключить язык с RTL to LTR и обратно

И вот я в начале файла проверяю определенный флаг и на основании этого выбираю нужный js/css
Делаю я это таким образом:

Код


if (filetype=="js"){
  var fileref=document.createElement('script')
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
 }
 else if (filetype=="css"){
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)

Это работает, но есть проблема, html загружается быстрее чем js/css.
Поэтому вначале на долю секунды показывается голый html, т.е. вся структура файла но без применения css и js
Затем браузер находит нужные файлы и разукрашивает страницу соответственно

Но вот эта демонстрация голой структуры совсем не к месту, может кто нибудь знает как побороть

И еще маленький вопрос в догонку, по теме, могу ли я загружать нужные файл только один раз на одной странице а потом уже использовать этот файл на всех остальных страницах, как константу какую нибудь

Спасибо

ksnk

Дата 11.9.2012, 13:35 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Цитата(inohodec @ 11.9.2012, 12:23

)

Но вот эта демонстрация голой структуры совсем не к месту, может кто нибудь знает как побороть

Например голую структуру нужно загружать после css и js. В таком-же javascript стиле.
Основная страница будет чем-то вроде "подождите идет загрузка."
Правда поисковикам такое обращение не понравится.

Можно менять страницу на сервере, с помощью php и кук.

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

inohodec

Дата 11.9.2012, 15:20 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 151
Регистрация: 1.12.2004

Репутация: нет
Всего: 2

Спасибо, я добавил весь html в javascript и всё это засунул в div, думал что сработает, так как вначале искал/загружал файл а потом заполнайл div. Но не тут то было, всё равно вылазит html...

Сервера у меня нет, тат как вся аппликация сидит на клиенте, это для смартфонов на phonegap.

Короче после долгих размышлений думаю сделать две версии файлов, типа rtl.main.html и ltr.main.html в них уже прописать родные для них js/css

lomaster

Дата 11.9.2012, 15:38 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 101
Регистрация: 27.5.2012

Репутация: нет
Всего: 2

Цитата

Это работает, но есть проблема, html загружается быстрее чем js/css.

А где прописан это скрипт?

inohodec

Дата 11.9.2012, 15:58 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 151
Регистрация: 1.12.2004

Репутация: нет
Всего: 2

Я сделал <div id="init"></>
Затем сделал <body onload="init(); ">
В init() я сначала добавляю нужный скрипт, а потом делаю document.getElementById("init");
И в этот элемент через innerHTML добавляю весь html

ksnk

Дата 11.9.2012, 16:06 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Цитата(inohodec @ 11.9.2012, 12:23

)

И еще маленький вопрос в догонку, по теме, могу ли я загружать нужные файл только один раз на одной странице а потом уже использовать этот файл на всех остальных страницах, как константу какую нибудь

Это называется кэширование. Кэширование производится максимально прозрачно для разработчика. Клиентский броузер кэширует файлы с одним и тем-же URI. Сам, если его специально не уговаривать так не делать. Перед загрузкой файла, обычно, на сервер посылается запрос "а не поменялся ли файл с таким именем?" Если сервер отвечает, что нет - берется версия из кэша.
Можно специальными заголовками при отдаче файла уговорить броузер не запрашивать сервер об измененных версиях, в течении какого-то времени. Так загрузка еще более сильно ускоряется. Однако при изменении контента на сервере возникнет проблема изменения кэша броузера клиента.

Цитата(inohodec @ 11.9.2012, 15:20

)

вначале искал/загружал файл а потом заполнайл div. Но не тут то было, всё равно вылазит html...

Надо было не вставлять контент из JavaScript, а подгрузить его с файла на сервере. Или дождаться полной загрузки css и javascript файлов.

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

inohodec

Дата 11.9.2012, 16:57 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 151
Регистрация: 1.12.2004

Репутация: нет
Всего: 2

Всем спасибо, попробую разобраться:)

lomaster

Дата 12.9.2012, 00:01 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 101
Регистрация: 27.5.2012

Репутация: нет
Всего: 2

Цитата

Затем сделал <body onload="init(); ">

onload работает соответственно поле того как боди загрузилось, пропишите скрипт в head, последним элементом, типа так

Код


<head>
........
<script>
// ваш скрипт
</script>
</head>

Aliance

Дата 14.9.2012, 09:56 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

lomaster, боюсь что в таком случае не будет доступа к DOM, который используется в скрипте.

Что если сделать родные стили что-то типа

Код


.main {
    display: none;
}
.temp {
    display: block;
}

Код


<body>

<div class="main">тут основной контент страницы</div>
<div class="temp">идет загрузка</div>

</body>

А в подключаемых стилях инвертировать видимость этих блоков.

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »