Я могу загрузить внешние таблицы стилей по запросу?
$.getScript('ajax/test.js', function() {
alert('Load was performed.');
});
.. как вышеупомянутый код, который загружает внешний JS по запросу, там что-то подобное, доступное для загрузки внешней таблицы стилей CSS при необходимости?
Как, например, когда я использую лайтбоксы (встроенные всплывающие окна) на моем сайте, я не хочу загружать лайтбокс JS и файлы CSS onload, если не требовал пользователь.
Спасибо
4 ответа
YUP: Если вы создаете тег , связанные с таблицей стилей, и добавьте его в <Глава> , Браузер загрузит эта таблица стилей.
E.G.
$('head').append('<link rel="stylesheet" type="text/css" href="lightbox_stylesheet.css">');
Однако , , , в соответствии с @ Peteorpeter комментариев , это не работает в IE 8 или ниже - там, вам нужно либо:
- добавить
<ссылку>До Установка егоHREF; Или - Использование IES
Document.createstyLesHeet ()
Кроме того, проверка ли ссылка уже добавлена, не работает на всех браузерах.
Я бы также подвергнуть сомнению частью вашего помещения:
Я хочу избежать загрузки файлов Lightbox JS и CSS, если не запрашивается пользователем.
Почему? Чтобы уменьшить вес страницы? Я могу понять желание, но вы должны измерить размер ваших файлов CSS и JS (после минификации и GZS) с помощью кода лайтбокса там, и без, чтобы увидеть, стоит ли уменьшение:
- добавленная сложность нагрузки по запросу, по требованию; И
- Слегка уменьшенная отзывчивость лайтбокса (потому что при загрузке по требованию лайтбокс придется ждать нагрузки своих собственных CSS и JS, прежде чем он может сделать это)
После зачисления и GZIPIPEING Ну не будь то большая разница.
И имейте в виду, что вы можете проинструктировать браузеру кэшировать ваши CSS и JS в течение длительного времени, что означает, что он только загружается, когда пользователь посещает ваш сайт с пустым кешем.
Вы могли бы сделать:
$('<link>').attr('rel','stylesheet')
.attr('type','text/css')
.attr('href','link_to.css')
.appendTo('head');
Вообще вы лучше, в том числе, включая все, что вам нужно предположить, что вы делаете это правильно.
тем, что я имею в виду, что лучшая практика для статического контента (изображений, JavaScript, CSS) состоит в том, чтобы:
- минимизировать внешние HTTP-запросы (минимизировать # файлы);
- версия файлов и использование дальних фьючерсов истекает заголовок ;
- министерство и сжимание контента в зависимости от обстоятельств.
Так что пользователь когда-либо будет загружать данный файл один раз, пока он не изменится.
Динамически загрузка CSS и JavaScript, если только он не является исключительно большим, обычно является необоснованным и контрпродуктивным.
Вы можете добавлять ссылки на внешние таблицы стилей, просто добавляя динамическое HTML содержимое в заголовке:
$('head').append('<link rel="stylesheet" href="style.css" type="text/css" />');
Это содержимое вставляется в DOM, а затем выводится нормально, в этом случае вызывая получение внешней таблицы стилей.
Обратите внимание и на ответ cletus, однако, если вы не будете осторожны с динамической загрузкой статического содержимого, это может стоить вам времени загрузки страницы и чрезмерной передачи ресурсов.