0

HTML5/CSS3 プロジェクトに取り組んでおり、いくつかのやや大きな (~100k) スプライト マップをロードして に配置する必要があり<canvas>ます。配置は問題ありませんが、javascript を介して要求された画像の読み込み完了を検出する方法がないため、読み込まれる前に誤って画像を配置するという問題が発生しています。

画像をプリロードして oncomplete イベントを処理する最良の方法は何ですか? 現在、標準$(document).ready()でページロードを検出していますが、必要なイベント ハンドラーにコードを適応させることができます。それをすべて処理するプラグインがあれば、素晴らしいです。

ただし、プリロードについてはもう少しこだわっています。可能であれば、すべてを JavaScript 内にとどめたいと思っています。非表示の div またはダミー css に画像を配置するよりもエレガントなものを探しています。

何か案は？

4

3 に答える 3

1 
var img = new Image();
img.onload = callbackFunction;
img.src = 'http://source.of/image.png';

これを頻繁に使用する場合は、関数を作成してください。

function preloadImage (src, callback) {
    var img = new Image();
    img.onload = callback;
    img.src = src;
    return img;
}

すべての画像が読み込まれたときにコールバックを発生させたい場合は、遅延オブジェクトを使用します。

function preloadImages (paths, callback) {

    var deferreds = [];

    $.each(paths, function (i, src) {
        var deferred = $.Deferred(),
            img = new Image();

        deferreds.push(deferred);
        img.onload = deferred.resolve;
        img.src = src;
    });

    $.when.apply($, deferreds).then(callback);
}
于 2013-01-15T23:18:25.350 に答える
0

ロードハンドラーを使用できますか? http://api.jquery.com/load-event/

于 2013-01-15T23:18:36.760 に答える
0

次のように、複数の画像をプリロードして、同じコールバックまたは異なるコールバックをそれぞれに割り当てることができます。

preloadImages([
    {src:"image1.jpg", callback:someFunction1},
    {src:"image2.jpg", callback:someFunction2},
    {src:"image3.jpg", callback:someFunction3}
]);

function preloadImages(arr)
{   
    function _preload(imgObj)
    {
        var img = new Image();
        img.src = imgObj.src;
        img.onload = imgObj.callback;
    }

    for (var i = 0; i < arr.length; i++)
    {
        _preload(arr[i]);
    }
}
于 2013-01-15T23:32:52.733 に答える