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

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

46 голосов
/ 24 января 2010 
$.getScript('ajax/test.js', function() {
  alert('Load was performed.');
});

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

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

Спасибо

Ответы [ 7 ]

64 голосов
/ 24 января 2010

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

* 1005 Е.Г. * 

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

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

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

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

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

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

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

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

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

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

27 голосов
/ 26 октября 2012 
$('<link/>', {rel: 'stylesheet', href: 'myHref'}).appendTo('head');
10 голосов
/ 24 января 2010

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

$('<link>').attr('rel','stylesheet')
  .attr('type','text/css')
  .attr('href','link_to.css')
  .appendTo('head');
4 голосов
/ 24 января 2010

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

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

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

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

2 голосов
/ 14 декабря 2010

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, вуаля.

2 голосов
/ 24 января 2010

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

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

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

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

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

0 голосов
/ 31 января 2018

Мы можем добавить его напрямую 

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