PreloadJS для перехода к фоновому изображению

Question

Я использую Preload JS для загрузки изображений. Однако некоторые из этих изображений необходимо вводить в качестве фоновых изображений в CSS. Однако это не сработает.

Когда я передаю свой «фон» в $ ('. Main'). Css ('background-image', 'url (' + img + ')'); HTML - «background-image: url (http://127.0.0.1:8080/undefined);»

Моя проблема в том, что я хочу предварительно загрузить изображение, получить его через свой идентификатор и записать его в фоновое изображение CSS. Как мне это сделать?

Глядя в случае путь просто - блоб: HTTP% 3A // 127.0.0.1% 3A8080/3694c430-db8f-4543-a85e-9d1b9e8da50d

Если я поместить изображения в моем CSS я могу видеть он дважды загружается. Загружаются загружаемые CSS-изображения, а затем загружаются они снова.

Я получил его, чтобы работать, путешествуя по событию HandleFileLoad. Получив идентификатор, а затем введя event.result.currentSrc, но для этого потребуется много повторений кода.

if(event.item.id === 'slide1'){ 
     $(".slide1").css({"background-image": 'url('+event.result.currentSrc+')'}); 
    } 

Но это вряд ли идеально, если у меня есть много изображений, которые нужно вторгаться в фоны.

Любая помощь будет оценена по достоинству.

Ниже приведен мой код.

var preload; 
var loader; 
var manifest; 

manifest = ([ 
    {id: 'background', src:'Main_1_Background.jpg'} 
]); 

preload = new createjs.LoadQueue(true, 'img/'); 
preload.on('fileload', handleFileLoad); 
preload.on('progress', handleOverallProgress); 
preload.on('fileprogress', handleFileProgress); 
preload.on('error', handleFileError); 

preload.setMaxConnections(5); 
preload.loadManifest(manifest); 


// File complete handler 
function handleFileLoad(event) { 
    console.log(event); 
    console.log(event.item.id); 

    var img = preload.getResult("background",true); 
    $('.main').css('background-image', 'url(' + img + ')'); 

} 

// File progress handler 
function handleFileProgress(event) { 

} 

// Overall progress handler 
function handleOverallProgress(event) { 

} 

// An error happened on a file 
function handleFileError(event) { 

} 

Answer 1

Вы не можете передать экземпляр изображения в CSS. CSS использует строке, так что вы могли бы использовать оригинальный источник этого элемента вместо:

var imgSource = preload.getItem("background").src; 
$('.main').css('background-image', 'url(' + img + ')'); 

Обратите внимание, что если вы загрузите изображение с помощью XHR (по умолчанию в PreloadJS), он не может вытащить из кэша, и вместо того, чтобы загрузить снова , Если вы видите эту проблему, я рекомендую вместо этого загружать теги:

preload = new createjs.LoadQueue(false, 'img/'); 

Cheers.

Answer 2

Если вы используете XHR для загрузки изображений, было бы лучше, чтобы получить источник из:

preload.getResult("background").src 

Это даст вам источник блоб вы только что загрузили.