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

Question

I am trying to load a random background image anytime someone visits a page, and I found an answer on SO that says I should be able to, but I can't seem to get it working.

Answer I am referring to: Mixing handlebars.js and CSS - Random background image?

My code looks as follows:

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}});

My console.log() doesn't seem to fire so I am not sure what is going on....

Answer 1

This approach seems a little bit hacky, but the general idea is that you store your images in a collection managed by Meteor-CollectionFS :

1. Run meteor add cfs:standard-packages cfs:filesystem .
2. Run mkdir -p public/bg_images in your project root.
3. Copy your images to /public/bg_images .
4. Define the Images collection, for example in your common.js :

---

Images = new FS.Collection("images", {
    stores: [new FS.Store.FileSystem("images", {path: "~/public/bg_images"})]
});

---

5. Unfortunately, the file management solution provided by CollectionFS does not recognise manual changes made to the /public/bg_images directory. As a result, we need to implement a mirroring mechanism to map the images stored on your file system with the corresponding collection:

---

if (Meteor.isServer) {
    Meteor.startup(function () {
        exec = Npm.require('child_process').exec;
        var fs = Npm.require('fs');
        var filesToMirror = [];
        child = exec('ls -m ' + process.env.PWD + '/public/bg_images/ | tr -d \' \n\' ', Meteor.bindEnvironment(function (error, stdout, stderr) {
            if (error !== null) {
                console.log('exec error: ' + error);
            }
            filesToMirror = stdout.split(',');
            console.log("Files to mirror:");
            console.log(filesToMirror);
            for (var i = 0; i < filesToMirror.length; i++) {
                fs.readFile(process.env.PWD + '/public/bg_images/' + filesToMirror[i],
                    Meteor.bindEnvironment(function (err, data) {
                        if (err) throw err;
                        var newFile = new FS.File();
                        newFile.attachData(data, {type: 'image/jpg'}, function (error) {
                                if (error) throw error;
                                newFile.name(filesToMirror[i]);
                            },
                            function (e) {
                                throw e;
                            });
                        Images.insert(newFile);
                    })
                )
            }
        }));
    });
}

---

6. Implement a template helper which returns the preferred image:

---

Template.background.helpers({
    image: function () {
        // Return random document of 'Images' collection, e.g.:
        return Images.findOne({}, {skip: Math.floor(Math.random() * Images.find().count()), limit: 1});
    }
});

7. Include your template helper:

---

<template name="background">
    {{#with image}}
        <img src='{{this.url}}'>
    {{/with}}
</template>

---

Please note: The proposed code in step 5 will add all images in /public/bg_images to your collection every time the server (re)starts. As a consequence, you may want to clear your Images collection prior to that.

Answer 2

I don't believe that Meteor will perform a substitution into your header.less file. That file is being preprocessed into the master css file long before your header loads.

As shown in the answer to the question you link to, you can put <style> settings in your html template file directly and the substitution can happen there. Alternatively you can set the background image in js using jQuery:

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