javascript - html、画像を待っている間、ページを準備完了のように見せます (タブの回転ホイールはありません)。

Question

さまざまなソースから画像を読み込むページがあります。これらの画像の読み込みに失敗することがあります。おそらく、リンクが切れているか、何でもあります。それはいいです。

私が気になるのは、ブラウザが画像の読み込みに失敗したと判断するまでに 6 秒以上 (私は 20 秒見たことがある) かかることです。この間、Chrome タブのローディング ホイールが回転し続け、ページの準備が整っていないように見えます。

JavaScript の読み込みを onload から $(document).ready() に切り替えたので、少なくとも画像が読み込まれるのを待っている間、ページが非アクティブになることはありません。しかし、それはあたかもそうであるように見えるかもしれません。

しかし、ページが画像を待っているだけのときに、ページを「準備完了」(糸車なし) に見せる方法はありますか? 画像をロードする別の方法でしょうか？現在、src で img 要素を使用しています。それとも早くあきらめさせる方法はありますか？画像リンクが死んでいると判断するのに本当に 6 秒かかるのでしょうか?

これに解決策があるかどうかはわかりません。これは、私だけでなく、多くの Web サイトで見られる問題ですが、気が狂いそうになります。私は停止するためだけに stop-loading-x をクリックすることがよくあります。少なくとも、自分のウェブサイトはそうであってほしくありません。

Answer 1

私のテストによると、Chrome の読み込みインジケータは、読み込みが Javascript によってトリガーされた画像要素には表示されません。したがって、javascript を無効にして画像が読み込まれないことを気にしない場合は、設定を解除して を送信しimg、srcページの読み込み時に設定することができます。URL を に保存できますdata-src。利点は、必要に応じて、画像がいつ読み込まれるかを制御できることです（ただし、 Roullieの回答が示唆するように、そのためにプラグインを使用することもできます）。

---

<img width=100 height=100 class="async-img" data-src="http://www.example.com/some.png">

...

$(document).ready(function(){
  $(".async-img").each(function(){
    this.src = $(this).data("src");
  })
})

Answer 2

多分それは助けることができます。 lazyload.js