10

我想知道是否有办法在页面加载后的某个时间加载一张更少的表格。 这个问题有一个解释如何重新加载所有工作表的答案，但对于我的用例，现有工作表永远不会依赖于新加载的工作表，最好只是懒惰地添加工作表。我在想类似的东西

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

可能代表一个可能的 API？干杯，

科林

2010 年 12 月 3 日更新：

我已经尝试了 Livingston Samuel 对 less.js 代码库的修复，虽然它确实有效，但它似乎无法识别已加载样式表中的定义。这是我的示例文件

一个。索引.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>

湾。无风格

@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，并且由于我没有卸载该工作表，我认为它应该在当前环境中仍然可供编译器使用。

换句话说，我们不想重新开始，或者卸载现有的定义，而是建立在已经加载的样式之上。谢谢，

科林

4

6 回答 6

5

我无法通过上面的解释来解决这个问题，所以我会提供我自己的。

所以首先。页面加载后加载您的 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();

你去吧。那应该只是动态加载一个样式表并告诉 Less 编译它。希望这可以帮助。

于 2012-03-09T17:46:05.457 回答
3

less.js在其本地范围内有一个函数loadStyleSheet，可用于动态加载和解析较少的样式（延迟加载）。

唯一的问题是该函数位于为定义而创建的闭包中，less.js因此您无法从代码中访问该函数。

也许它可以通过扩展 api 来暴露。

更新：

我创建了less.js@ https://github.com/livingston/less.js的分叉版本

使用此版本，您可以使用该方法加载任何样式表less.less.loadStyleSheet(YOUR_FILE_URL, CALLBACK)

我还向实际库提出了拉取请求，希望他们接受我的更改。

于 2010-12-02T12:26:09.870 回答
3

刚刚为我自己的需要采用了 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-15T18:07:39.133 回答
1

或者，您可以编写一些服务器端代码，将您的 .less 样式表即时转换为 .css。从客户端你会懒惰地加载它，就好像它是任何其他 .css 样式表一样。这是http://www.dotlesscss.org/使用的方法，尽管它可以用于任何风格的 .less。

也许不是你想要的，但我认为它是一些人的选择。

于 2010-12-05T21:14:11.040 回答
0

您可以使用这个轻量级库来延迟加载 less / css 和 js 文件（免责声明：我是作者）。

这很简单：

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

它还可以接收回调，加载更多具有依赖关系的资产并处理缓存。

于 2014-07-06T10:17:11.433 回答
-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-26T02:22:13.140 回答