预加载图像以设置为背景图像

Question

I am trying to pre-load some images and set them as background images. I'm showing that the images are being loaded, but they're not being brought in as background images but rather, <img> elements. Is it not possible to pre-load background images?

Function to pre-load the images

function preloadImage(url){
    var imgObj = new Image();
    imgObj.src = url;
    imgObj.onload = function(){
        console.log(imgObj, "Loaded");
    }
}

Object holds the image url's.

var Plane_Images = {
    Skin: {
        name: "Skin Schematic",
        src: preloadImage("images/Top.png"),
        schematics: ["A", "B", "C", "D"]
    },
    Structure: {
        name: "Structure Schematic",
        src: preloadImage("images/ata21.png"),
        schematics: ["E", "F", "G", "H"]
    },
    Electrics: {
        name: "Electrics Schematic",
        src: preloadImage("images/ata26.png"),
        schematics: ["I", "J", "K", "L"]
    },
    Fuel: {
        name: "Fuel Schematic",
        src: preloadImage("images/Top.png"),
        schematics: ["M", "N", "O", "P"]
    }
}

Sets the background image

for(var images in Plane_Images){
    var schematic = $("<div data-id='" +id +"_menu' data-url='" +image_src +"'><div class='label'><p>" +images +"</p></div></div>");
    schematic.addClass("schematics");
    schematic.css("background-image", "url(" +image_src +")");

    $("#menu").append(schematic);
}

Answer 1

The preloadImage function never returns a value, so the src property is never set. To ensure that the objects do not get cleaned up after the function is called, I would return the object to a property:

function preloadImage(url){
    ...
    return imgObj;
}

var Plane_Images = {
    Skin: {
        name: "Skin Schematic",
        image: preloadImage("images/Top.png"),
        schematics: ["A", "B", "C", "D"]
    },
}

And access the src by:

var image_src = current.image.src;

So, two answers: The function should return something. I would return the object, so the pre-loading will not get canceled if the Image Object is cleaned up after the function execution.

Also, your setting function looks a little off:

for(var images in Plane_Images){

Should probably read:

for(var image_name in Plane_images){
    var current = Plabe_images[image_name];
    var image_src = current.image.src;  // Or however you store the source.

See http://www.w3schools.com/js/js_loop_for.asp

Answer 2

Here is an alternate way to preload images for use as the background-image property.

body:after {
  display: none;
  content: url(img0.png) url(img1.png) url(img2.png);
}