3

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

当我将“背景”传递给 $('.main').css('background-image', 'url(' + img + ')'); HTML是“背景图像：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) {

}
4

2 回答 2

5

您不能将图像实例传递给 CSS。CSS 使用字符串，因此您可以使用项目的原始源代码：

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

请注意，如果您使用 XHR（PreloadJS 中的默认设置）加载图像，它可能不会从缓存中拉取，而是再次加载。如果您看到此问题，我建议您改用标签加载：

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

干杯。

于 2015-11-13T23:03:00.647 回答
1

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

   preload.getResult("background").src

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

于 2015-12-29T19:12:54.493 回答