Могу ли я загружать внешние таблицы стилей по запросу? 

$.getScript('ajax/test.js', function() {
  alert('Load was performed.');
});

.. как приведенный выше код, который загружает внешний JS по запросу, есть ли что-то подобное для загрузки внешней таблицы стилей CSS, когда это необходимо?

Как, например, когда я использую лайтбоксы (встроенные всплывающие окна) на моем сайте, я хочу, чтобы не загружать загружаемые файлы JS и CSS для загрузки в лайтбокс, если только это не запрашивается пользователем.

Спасибо

Ответы

Ответ 1

Yup: если вы создаете тег <link>, ссылающийся на таблицу стилей и добавляя его в тег <head>, браузер загрузит эту таблицу стилей.

например.

$('head').append('<link rel="stylesheet" type="text/css" href="lightbox_stylesheet.css">');

Однако, в соответствии с комментариями @peteorpeters, это не работает в IE 8 или ниже - вам нужно либо:

  • добавьте <link> перед установкой href; или
  • использовать метод IE document.createStyleSheet()

Кроме того, проверка того, добавлена ​​ли ссылка, не работает надежно во всех браузерах.

Я бы также поставил под вопрос часть вашего предположения:

Я хочу, чтобы не загружать загружаемые файлы JS и CSS для загрузки в лайтбокс, если только пользователь не запросил.

Почему? Уменьшить вес страницы? Я могу понять это желание, но вы должны измерить размер ваших CSS и JS файлов (после мини-кодирования и gzipping) с помощью кода лайтбокса там и без, чтобы посмотреть, стоит ли сокращение:

  • добавленная сложность загрузки по требованию; и
  • слегка уменьшенная отзывчивость лайтбокса (потому что при загрузке по требованию лайтбокс должен будет дождаться загрузки собственного CSS и JS, прежде чем он сможет это сделать).

После минимизации и gzipping, может быть, не так много.

И помните, что вы можете поручить браузеру кэшировать ваши CSS и JS в течение длительного времени, то есть он загружается только тогда, когда пользователь посещает ваш сайт с пустым кешем.

Ответ 2

$('<link/>', {rel: 'stylesheet', href: 'myHref'}).appendTo('head');

Ответ 3

Вы можете сделать:

$('<link>').attr('rel','stylesheet')
  .attr('type','text/css')
  .attr('href','link_to.css')
  .appendTo('head');

Ответ 4

Вы можете добавить ссылки на внешние таблицы стилей, просто добавив динамическое содержимое HTML в голову:

$('head').append('<link rel="stylesheet" href="style.css" type="text/css" />');

Этот контент вставляется в DOM и впоследствии отображается нормально, в этом случае вызывается выборка внешней таблицы стилей.

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

Ответ 5

Как правило, вам лучше всего включить все, что вам нужно, если вы сделаете это правильно.

Под этим я подразумеваю, что наилучшая практика для статического контента (изображения, Javascript, CSS) заключается в следующем:

  • минимизировать внешние HTTP-запросы (минимизировать количество файлов);
  • версия файлов и использование будущего фьючерса Expires header;
  • минимизировать и сжимать содержимое по мере необходимости.

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

Динамическая загрузка CSS и Javascript, если она не является исключительно большой, обычно необоснованна и контрпродуктивна.

Ответ 6

Проблемы IE...

Я разбивал IE 6,7,8 с помощью

$('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'assets/css/jquery.fancybox-1.3.4.css') );

Просто скопировал их в основной лист, чтобы избежать другого http req, voila.