html，僅在等待圖像時使頁面顯示就緒（沒有選項卡旋轉輪）

Question

我有一個頁面可以加載來自各種來源的圖像。 有時，這些圖像無法加載； 也許鏈接已失效或其他原因。 沒關系。

讓我困擾的是，瀏覽器可能需要6秒鍾甚至更長的時間（我看過20秒鍾）才能確定圖片無法加載。 在這段時間內，Chrome標簽頁中不斷旋轉的加載輪不斷旋轉，似乎我的頁面尚未准備好。

我已將JavaScript加載從onload切換為$（document）.ready（），因此在等待圖像加載時，至少我的頁面處於非活動狀態。 但是看起來好像是這樣。

但是，當所有圖片都在等待圖像時，是否可以通過某種方式使我的頁面顯示為“就緒”（沒有旋轉輪）？ 也許是加載圖像的另一種方法？ 我目前將img元素與src一起使用。 還是讓它早日放棄的方法？ 確定圖像鏈接已失效真的需要6秒鍾嗎？

不知道這是否有解決方案。 我在很多網站上都看到過這個問題，不僅是我的，而且讓我發瘋。 我會經常單擊stop-loading-x來使其停止！ 我至少希望自己的網站不是那樣。

Answer 1

根據我的測試，Chrome中的加載指示器未顯示由Javascript觸發加載的圖像元素。 因此，如果您不介意在禁用javascript的情況下無法加載圖片，則可以發送未設置src的img ，並在頁面加載時進行設置。 您可以將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