我想知道是否有一种方法可以在页面加载后的某个时间加载一张更少的工作表. 这个问题有一个解释如何重新加载所有工作表的答案,但对于我的用例,现有的工作表从不依赖于新加载的工作表,并且最好只是懒惰地添加工作表.我在想类似的东西
less.sheets.push(mySheet);
less.loadStyleSheet(mySheet);
可能代表一个可能的API？干杯,
科林
更新2010年12月3日:
我已经尝试了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;
}
}
C.style2.less
#abc {
background: @primary_color;
.rounded(10px);
div {
margin: 2px;
color: blue;
}
}
所以第二个样式表确实会延迟加载,但它在style2.less中有以下解析错误
".rounded是未定义的"
.rounded是定义style.less,因为我没有卸载那张表,我认为它应该仍然可用于当前环境中的编译器.
换句话说,我们不想重新开始,也不想卸载现有的定义,而是建立在已经加载的样式上.谢谢,
科林
我无法通过上面的解释弄清楚这一点,所以我会提供自己的解释.
首先.页面加载后加载到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编译它.希望这可以帮助.
You*_*nny -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或类似的方式来正常工作。