Предварительная загрузка изображений для установки в качестве фонового изображения

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

и доступ ЦСИ по:

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

Answer 2

Вот альтернативный способ для предварительной загрузки изображений для использования в качестве свойство background-image.

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