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

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

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

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

Colin

UPDATE 3 декабрь 2010:

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

a. 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>

b. 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; 
    } 
}

c. style2.less

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

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

Так вторая таблица стилей делает нагрузку лениво, но он имеет следующие разборе ошибки в style2.less

".rounded неопределен"

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

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

Colin

источник

2010-07-08 hawkett

Для справки для других: less = http://lesscss.org/ – Orbling

-2

Все, что вам нужно сделать, это добавить новый тег сценария в 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 или аналогичным образом.

источник

2010-11-26 02:22:13 Youarefunny

Извините, я думал, что это именно то, что вы назвали своим файлом javascript :( – Youarefunny

Я не совсем понимаю, что вы хотите сделать? добавьте таблицу стилей (будь то таблица стилей less.js) в DOM после загрузки страницы? – Youarefunny

1. Загрузка страницы завершена, 2. Пользователь делает некоторые вещи, и в какой-то момент в будущем нажимает ссылку, для которой требуется новая таблица стилей . Хорошим примером может быть установка компонента виджета ui.Мы не хотим перезагружать всю страницу, только требуемые html и css для виджета. – hawkett

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

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

Возможно, это может быть показано расширением api.

Update:

Я создал раздвоенный версию less.js @https://github.com/livingston/less.js

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

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

источник

2010-12-02 12:26:09

Я протестировал его, и он действительно работает, но определения в уже загруженных таблицах стилей не распознаются. Будет обновлен вопрос более подробно. Приветствия. – hawkett

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

Возможно, это не то, что вы ищете, но это вариант для некоторых, кого я думаю.

источник

2010-12-05 21:14:11

Yep def. вариант - мое приложение находится в App Engine (python), а скрипты стиля предоставляются пользователю во время выполнения - поэтому мои единственные параметры для компиляции на стороне сервера: (a) библиотека python (я не могу найти ничего, что кажется ухоженным, текущие или, вероятно, надежно следуют за меньшим продвижением). (б) Внешняя веб-служба, которая принимает исходные скрипты и возвращает скомпилированный вывод. (c) выберите что-то другое, кроме LESS, которое имеет компилятор python. Ни один из этих вариантов не очень привлекателен, и легкость, с которой less.js решает эти проблемы (если она лениво загружается), очень привлекательна. Спасибо. – hawkett

Другое дело в том, что, поскольку мне нужна ленивая загрузка, мне нужно, чтобы детали были отдельно доступны/скомпилированы - например. userA может использовать только скрипт1, в то время как userB может использовать скрипт1 и script2 (скрипт2 нельзя использовать сам по себе, так как он зависит от скрипта1, но скрипт2 не может использоваться всеми). Поэтому, когда script2 загружается, если он был предварительно скомпилирован на сервере, файл css будет содержать все определения в уже загруженном скрипте1. Правда, они просто переопределяют, но излишне большие файлы css и вообще неплохо пахнут. – hawkett

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

Итак, сначала. Загрузите свою таблицу стилей 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, чтобы перезагрузить все свои листы доброты, это включает лист, который вы только что добавили в его стек.

less.refresh();

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

источник

2012-03-09 17:46:05 MSaforrian

Просто принятый 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();

источник

2012-11-15 18:07:39 sunrize531

Вы можете использовать эту легкую библиотеку lazy load less/css and js files (оговорку: я являюсь автором).

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

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

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

источник

2014-07-06 10:17:11

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

ответ

Смежные вопросы