0

ページがロードされたらすべてのコマンドを実行するために、すべてのコマンドをプッシュする配列を維持しています。これは次の方法で行われています。

<img src='holder.js/200x280/text:name' 
     alt='name' width='200px' 
     onload='getPoster(this, name)'>

これは反復プロセスであり、ループで約 20 回実行されます。

これが完了したら (ページが完全に読み込まれ)、すべてのonload()イベントが配列にスタックされたら、それぞれを 1 つずつ実行します。

これで達成できると思っていましたが、$(document).ready()役に立ちません。ただし、setTimeout()関数を使用すると、最終的な結果を確認できます。しかし、それは明らかに良いことではありません。

getPoster 関数: 

function getPoster(img, title) {
    commands.push(new titles(img, title));
}

すべての onload イベントがスタックされたら、どのように画像をロードすればよいと思いますか?

4

4 に答える 4

1

getPoster()呼び出し回数が画像の総数に達したら、各コマンドを実行して、呼び出し回数を追跡します。

于 2013-04-22T16:23:54.190 に答える
0

これを使用できます：

<img class="posterImg" src='holder.js/200x280/text:name' alt='name' width='200px'>

$(document).ready(function () {    
    $(".posterImg").one('load', function () {
        getPoster(this,$(this).attr('alt'));
    }).each(function () {
        if (this.complete) $(this).load();
    });

});
于 2013-04-22T16:28:58.350 に答える
0

ImagesLoaded プラグインを使用して実現できます。

https://github.com/desandro/imagesloaded

于 2013-04-22T16:23:02.077 に答える
0

JavaScript はシングルスレッドの同期言語です。したがって、基本的に命令は記述した順序で処理されます。Ajax リクエストは非同期ですが、画像などの読み込みはそうではありません。

4 つの関数を呼び出す必要がonloadあり、その後、画像をロードしたいとします。特に jQuery を使用している場合は、非常に簡単です。Ajax リクエストやその他の非同期アクションを作成していない場合、関数は同期的に、または次々に実行されます。

$(function() {//is equivalent to $(document).ready(function(){
    functionOne();
    functionTwo();
    functionThree();
    //etc
    loadImages();

});

あなたが望むものを達成するために、私が考えることができる最も効率的な方法はカスタムeventです。次のようなものを使用します。

$('#foo').on('completedEveryThingElse', function(event) {
  // So bind the event to whatever wrapper and then trigger it when you are done
  // loading all other stuff.
  // Now start loading images.
});

// Whenever you are done loading everything else.
$('#foo').trigger('completedEveryThingElse');

jQuery API のHEREをご覧ください。trigger()

于 2013-04-22T16:24:56.123 に答える