javascript - 用户空格键和模板助手在 Meteor 中随机加载页面背景

Question

我试图在有人访问页面时加载随机背景图片，我在 SO 上找到了一个答案，说我应该可以，但我似乎无法让它工作。

我指的是答案:Mixing handlebars.js and CSS - Random background image?

我的代码如下所示:

header.html:

 <div class="backgroundImage"> stuff </div>

header.js:

loadbg: function() {
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open("GET", "/backgrounds", false); // false for synchronous request
    xmlHttp.send(null);
    var returnedData = JSON.parse(xmlHttp.responseText);
    //console.log(returnedData[randomNumber(2, returnedData.length)]);
    var randomImageName = returnedData[randomNumber(2, returnedData.length)];
    var path = "../images/background/"+randomImageName;
    console.log(path);
    return randomImageName;   
}

header.less:

background-image: url({{loadbg}});

我的 console.log() 似乎没有触发，所以我不确定发生了什么....

Answer 1

我认为 Meteor 不会对您的 header.less 文件执行替换。在您的 header 加载之前很久，该文件就被预处理到主 css 文件中。

如您链接到的问题的答案所示，您可以输入 <style>直接在您的 html 模板文件中设置，替换可以在那里进行。或者，您可以使用 jQuery 在 js 中设置背景图像:

$('.backgroundImage').css('background-image','url(' + imageUrl + ')');