3

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) {

}
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 に答える