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

Question

我正在尝试预加载一些图像并将它们设置为背景图像。我显示图像正在加载，但它们没有作为背景图像引入，而是 <img>元素。不能预加载背景图片吗？

预加载图像的函数

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

对象保存图像 URL。

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"]
    }
}

设置背景图片

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

preloadImage 函数永远不会返回值，因此永远不会设置 src 属性。为了确保调用函数后对象不会被清理，我会将对象返回到属性:

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

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

并通过以下方式访问src:

var image_src = current.image.src;

所以，有两个答案:函数应该返回一些东西。我会返回该对象，因此如果在函数执行后清理了图像对象，则预加载不会被取消。

此外，您的设置功能看起来有点不对劲:

for(var images in Plane_Images){

可能应该阅读:

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.

参见http://www.w3schools.com/js/js_loop_for.asp