Question

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

当我通过我的背景＆＃39;到$（＆＃39; .main＆＃39;）。css（＆＃39; background-image＆＃39;，＆＃39; url（＆＃39; + img +＆＃39;）＆＃39;） ; HTML是＆＃34; background-image：url（http://127.0.0.1:8080/undefined）;＆＃34;

我的问题是我想预先加载图片，通过它的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/');

干杯。

Answer 2

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

   preload.getResult("background").src

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

PreloadJS传递给背景图像

2 个答案: