jquery - $(document).ready() 画像のタイムアウト

Question

jQuery を使用する場合、DOM の準備が整うのを待ってから作業を開始します。私の問題は画像にあります。

画像の読み込みに時間がかかることもあれば、まったくないこともよくあります。だから私は基本的にready()にタイムアウトを持たせたい。5 秒ほど待機し、選択した画像が読み込まれていない場合は、関数が実行されます。

これは可能ですか？

Answer 1

document.ready と window.onload を混同している可能性があると思います

window.onload

これは、ページの読み込みが完了した後に発生するイベントです。したがって、すべての画像のダウンロードが完了する (またはタイムアウトする)まで待つ必要があるため、この機能は適していません。

ドキュメント準備完了

これは、DOM の準備が整った後に発生するイベントです。これは、ブラウザが実際にページを構築したときですが、まだいくつかの画像やフラッシュ ファイルを取得する必要がある場合があります。すべての画像がダウンロードされる前に DOM を操作する準備ができているため、この関数はあなたが求めているものになります。

この関数内でタイマーを設定して 5 秒間待機し、その画像をダウンロードしたかどうかを確認できます。

参考文献

サンプルコード:

<script>
    $(document).ready(function() {
        var imagesLoaded = false;
        var imagesTimer = setTimeout("alert('images failed to load')", 10000);

        $("img.checkme").load(function(){
            imagesLoaded = true;
            clearTimeout(imagesTimer);
            alert('images loaded within 10 seconds')
        });
    });
</script>

Answer 2

セレクターのコンテキストで画像がダウンロードされるのを待ってからコールバックを起動するjQueryプラグインがあります。

だからあなたはできる...

$('body').waitForImages(function() {
  // Images have loaded.
});

Answer 3

-- 編集: この回答は決定的なものではなく、役立つだけです。

私を無視してください。これは、ロード後の画像用です。レンダリングされたらすぐにタイムアウトを設定したい。この場合、少し違うことをします。各画像のレンダリング時に「起動」タイムアウトを設定し、「読み込み」が 5 秒以内にそれをキャンセルしない場合は、やりたいことを起動します。

ただし、一般的な方法でアタッチできる負荷よりも早いイベントがある場合があります。わからない。

- 年：

確かに、「img」「load」イベントにアタッチするだけでよいと思います。

おそらく次のようなものです：

// not tested, completely made up
$("img").load({ alert("foo"); });