PreloadJS 传递给背景图像

Question

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

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

我的问题是我想预加载图像，通过其 ID 获取它并将其写入 CSS 背景图像。我该怎么做？

调查事件路径只是 - 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/');

干杯。

Answer 2

如果您使用 xhr 加载图像，最好从以下位置获取源代码：

   preload.getResult("background").src

这将为您提供刚刚加载的 blob 源。

PreloadJS 传递给背景图像

PreloadJS to pass to background-image

javascript

createjs

preloadjs