PreloadJS传递给背景图像

我正在使用预加载JS来加载我的图像。然而，这些图像中的一部分需要作为背景图像注入CSS中。但是这不起作用。当我将我的'背景'传递给$（'。main'）。css（'background-image'，'url（'+ img +'）'）; HTML是“background-image：url（http://127.0.0.1:8080/undefined）;”PreloadJS传递给背景图像

我的问题是，我想预载图像，通过它的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) { 

}

来源

2015-11-13 Komsomol

您无法将图像实例传递给CSS。 CSS使用一个字符串，因此您可以使用该项目的原始源代码而不是：

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

请注意，如果您加载使用XHR（在PreloadJS默认）的图像，它可能不会从缓存中拉，而是再次加载。如果你看到这个问题，我推荐使用标签加载代替：

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

干杯。

来源

2015-11-13 23:03:00 Lanny

getItem和getResult有什么区别？ – Komsomol

getResult返回加载的内容。 getItem返回您传递给PreloadJS的加载项目。 – Lanny

如果你使用XHR来加载图片，倒不如从中获取来源：

preload.getResult("background").src

这会给你你刚才加载的BLOB来源。

来源

2015-12-29 19:12:54

同意，这是很好的建议。 – Lanny

PreloadJS传递给背景图像

回答

相关问题