ленивая загрузка листа - PullRequest
Новая
       4

ленивая загрузка листа

10 голосов
/ 08 июля 2010

Мне интересно, есть ли способ загрузить один лист меньше после загрузки страницы. На этот вопрос есть ответ, в котором объясняется, как перезагрузить все листы, но для моего варианта использования существующие листы никогда не имеют зависимостей от вновь загруженных листов, и было бы хорошо просто добавить листы. Я думаю что-то вроде 

less.sheets.push(mySheet);
less.loadStyleSheet(mySheet);

может представлять возможный API? Cheers,

Colin

ОБНОВЛЕНИЕ 3 декабря 2010 г .:

Я опробовал исправление Livingston Samuel для кодовой базы less.js, и, хотя оно работает, оно не распознает определения в уже загруженных таблицах стилей. Вот мои примеры файлов

а. index.html 

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Simple</title>

  <link rel="stylesheet/less" href="/static/less/style.less" id="abc123"/>
  <script src="/static/js/less-1.0.40.js"></script> 
</head>
<body>
  <div id="container">
    <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
  </div>
  <div id="abc"><div>Bingo</div></div>
</body>

<script>
console.log("loading new sheet");
less.loadStyleSheet("/static/less/style2.less", function() {
    console.log("Loaded!"); 
});

console.log("called");

</script>
</html>

б. style.less 

@primary_color: green;

.rounded(@radius: 5px) {  
  -moz-border-radius: @radius;  
  -webkit-border-radius: @radius;  
  border-radius: @radius;  
}

#container {
  background: @primary_color;
  .rounded(5px);

  div {
    color: red;
  }
}

с. style2.less 

#abc {
  background: @primary_color;
  .rounded(10px);

  div {
    margin: 2px;
    color: blue;
  }
}

Итак, вторая таблица стилей загружается лениво, но в style2.less

есть следующая ошибка анализа

". Округлено не определено"

.ounded определяется style.less, и, поскольку я не выгружал этот лист, я подумал, что он все еще должен быть доступен для компилятора в текущей среде.

Другими словами, мы не хотим начинать заново или выгружать существующие определения, а опираемся на уже загруженные стили. Спасибо,

Colin

Ответы [ 6 ]

5 голосов
/ 09 марта 2012

Я не смог понять это с помощью приведенных выше объяснений, поэтому я предоставлю свои.

Итак, во-первых. Загрузите таблицу стилей Less после загрузки страницы. Примерно так: 

$('head').append('<link rel="stylesheet/less" href="path/to/yourDynamicStyles.less" />');

Отлично. Теперь выберите свою таблицу стилей и вставьте ее в коллекцию листов, которая уже есть в Less.js. Он ожидает объект DOM, поэтому я использовал селектор jQuery. 

less.sheets.push($('link[href="path/to/yourDynamicStyles.less"]')[0]);

Если кто-то знает лучший способ сделать это, пожалуйста, просветите меня. (Мне нужно было добавить [0], чтобы получить правильное значение.) Если вы сделаете это в консоли, он вернет число. Это число - количество листов, о которых меньше известно, так что, надеюсь, оно вернулось на одно число выше того, что вы уже имели при загрузке страницы.

Следующая часть проста. Вы указываете Less.js перезагружать все его листы Lessy Goodness, включая лист, который вы только что добавили в свой стек. 

less.refresh();

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

3 голосов
/ 15 ноября 2012

Только что принял ответ MatthewForr для моих собственных нужд: 

$.each(['/css/style1.less', '/css/style2.less'], function (index, fileName) {
    var $sheet = $('<link />', {
        href: fileName,
        rel: 'stylesheet/less',
        type: 'text/css'
    }).appendTo('head');
    less.sheets.push($sheet[0]);
});
less.refresh();
3 голосов
/ 02 декабря 2010

less.js имеет локальную область действия loadStyleSheet, которая может использоваться для динамической загрузки и анализа меньшего количества стилей (отложенная загрузка).

Единственная проблема заключается в том, что функция находится в созданном замыкании.для определения less.js, чтобы вы не могли получить доступ к функции из своего кода.

Может быть, она может быть раскрыта путем расширения API.

Обновление:

У меня естьсоздал раздвоенную версию less.js @ https://github.com/livingston/less.js

Используя эту версию, вы можете загрузить любую таблицу стилей, используя метод less.less.loadStyleSheet(YOUR_FILE_URL, CALLBACK)

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

1 голос
/ 06 декабря 2010

В качестве альтернативы вы можете написать некоторый код на стороне сервера, который на лету преобразует вашу таблицу стилей .less в .css. С клиента вы бы загружали его лениво, как если бы это была любая другая таблица стилей .css. Это подход, используемый http://www.dotlesscss.org/, хотя он может использоваться любым вариантом .less.

Может быть, не то, что вы ищете, но это вариант для некоторых, я думаю.

0 голосов
/ 06 июля 2014

Вы можете использовать эту легковесную библиотеку для отложенной загрузки файлов / css и js (отказ от ответственности: я автор).

Это так просто: 

lazy.load('/static/less/style.less');

Он также может принимать обратный вызов, загружать еще несколько активов с зависимостями и заботится о кеше.

0 голосов
/ 26 ноября 2010

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

function addScript (id, url)    //  Adds scripts to the DOM
{
    var s = document.createElement('script');
    s.id = id;
    if (url)    s.src=url;
    s.type='text/javascript';

    document.getElementsByTagName('head')[0].appendChild(s)
    return s;
}

Это то, что я использую на своем сайте, но я называю это анализом.Если вы используете его как ленивый загрузчик, он должен нормально работать, если вы называете его onload или аналогичным образом.

...