0

このコードが機能するまで jQuery を待機させることは可能ですか?

if (hrefs[arrayCounter]) {
    $('<li>').append($('<img>', {
        src: hrefs[arrayCounter]
    }).css({
        "height": windowHeight
    })).appendTo(ul)
}​

この直後に画像がスクロールし、スクロールする前に計算された幅が必要です。言い換えれば、画像がまだ読み込まれている間は、処理が早すぎます。私が知っていることから、 appendTo() はコールバックを受け取らないので、どうすればこれを行うことができますか?

4

2 に答える 2

1

このコードを使用する前に、画像のonloadイベントにいくつかのクロスブラウザの問題があることに注意してください。これらは、jQueryの.loadメソッドのドキュメントで説明されています。

Deferredオブジェクトを作成し、各イメージのonload関数に基づいてパイプする必要があります。

$.when.apply($,$.map(hrefs, function(href) {
    var imgLoad = $.Deferred(),
        $img = $('<img>').css('height',windowHeight);
    ul.append($('<li>').append($img));
    $img.load($.proxy(imgLoad.resolve,imgLoad));
    $img.attr('src',href);
    return imgLoad;
})).done(function(){
    // all images are loaded when this executes
})

このコードはjQuery.map、hrefの配列をDeferredオブジェクトの配列に変換するために使用します。画像をループして追加している間、各画像は独自のDeferredオブジェクトを取得し、そのメソッドは画像のハンドラーに.resolveバインドされます。.load画像が読み込まれると、遅延が解決されます。

このDeferredの配列は、への引数として適用されますjQuery.when。これは、すべての引数が解決されたときに解決されるPromiseを返します。この場合は、すべての画像が読み込まれたことを意味します。.done次に、そのPromiseにコールバックをアタッチします。

于 2012-10-07T20:02:46.403 に答える
0

基本的に画像の .load() イベントに固執して新しいコードを起動するこの jsFiddleを作成しました。これは読み込み可能なコンテンツに対してのみ機能しますが、私が理解していることはあなたのニーズに合っているようです.

基本的に、起動したいコードを.on('load',handler)画像のイベントにバインドする必要があります。

これが何らかの形で役立つことを願っています。

于 2012-10-07T19:56:45.597 に答える