PreloadJS传递给背景图像

Question

我使用Preload JS来加载我的图像.然而,其中一些图像需要在CSS中作为背景图像注入.但这不起作用.

当我将'背景'传递给$('.main').css('background-image','url('+ img +')'); HTML是"background-image:url(http://127.0.0.1:8080/undefined);"

我的问题是我想预加载图像,通过它的ID获取它并将其写入CSS Background Image.我该怎么做呢？

查看事件路径只是 - blob:http%3A // 127.0.0.1%3A8080/3694c430-db8f-4543-a85e-9d1b9e8da50d

如果我将图像放入我的CSS中,我可以看到它是双重加载的.加载CSS图像,然后PreloadJS再次加载它们.

我通过追踪HandleFileLoad事件来实现它.获取ID然后注入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/');

干杯.