クラス内のすべての画像を読み込む
esd
同じクラスを共有する52枚の画像を読み込んでいます。読み込んだ画像をコンソールに印刷すると、更新するたびに出力される画像の量が変化します。
プログレスバーで進行状況を追跡してから画像ギャラリーを表示しようとしているので、望ましい出力はクラス内のすべての画像をロードすることです。
var thumbs = document.getElementsByClassName("thumbImg");
var thumbTotal = thumbs.length;
console.log("number of thumbImg's = ", thumbTotal);
$(".thumbImg").on("load", function() {
console.log("the following has loaded = ",this);
});
これにより、ロードされた画像のランダムな量を示す以下が出力されます。
user1106925
ブラウザのキャッシュが原因である可能性があります。各画像の.completeプロパティを確認してみて、すでに完了している場合はすぐにコードを実行できます。
$(".thumbImg").each(function(i, el) {
if (el.complete) {
handler.call(el);
} else {
$(el).on("load", handler);
}
})
function handler() {
console.log("the following has loaded = ",this);
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
Unity-wwwを使用して画像を読み込むと、アプリケーション内のすべての画像が変更されます
- 2
別のDIVをクリックしてJavascriptでDIVの画像とクラスを再読み込みします。
- 3
ボックスCSSjqueryの他の画像の背後の画像を読み込む
- 4
ギャラリー内のすべての画像がReactのAPIから（フックを使用して）（完全に）読み込まれるまで、読み込みインジケーターを表示します
- 5
PILを使用してフォルダーからすべての画像を読み込む
- 6
HTMLで最初の3つの画像要素を読み込み、[さらに読み込む]をクリックして次の2つの要素を表示します
- 7
Spring Boot Appは、画像の読み込み中でも、リソース内のすべての静的コンテンツに対して401を返します
- 8
すべての画像の読み込み中に「gifの読み込み」をグローバルにトリガーします（インラインで表示）
- 9
クリックした画像のみを読み込む
- 10
jqueryUIスライダー-ループ内で.mapと.get（）を使用して、すべてのスライダーの値を配列に読み込みます
- 11
TinyXMLを使用してすべての兄弟の要素を読み込む
- 12
Python で Argparse を使用して画像を読み込む際のエラー
- 13
すべての列を文字列に読み込むための最良の方法
- 14
ページの読み込み、CSSで画像を読み込む
- 15
ブラウザの幅に基づいて画像を読み込む
- 16
ブラウザの幅に応じて画像を読み込む方法
- 17
ピカソを使用してスクロールのリストクラッシュアプリに画像を読み込む
- 18
多くの画像を読み込む
- 19
Picassoを使用してAndroidのViewPagerに画像を読み込む方法
- 20
Glideを使用してKotlinAppWidgetに画像のURLを読み込む
- 21
Stringkotlinを介して画像のURLを読み込む
- 22
コンテナ内のすべての行でブートストラップクラスが読み込まれていません
- 23
すべてのプロパティをスプリング付きの配列に読み込む方法は？
- 24
すべてのプロパティをスプリング付きの配列に読み込む方法は？
- 25
すべてのプロパティをスプリング付きの配列に読み込む方法は？
- 26
空でないすべてのcsvファイルをRのリストに読み込む方法
- 27
人形遣いはすべての画像が読み込まれるのを待ってからスクリーンショットを撮ります
- 28
すべてのインターフェースをリストに読み込む
- 29
バックボーンビュー内で、プレースホルダー画像が読み込まれるのを待ってから、ビューを表示して実際の画像を遅延読み込みします
コメントを追加