可參考此作者想法:
https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/274715/

其實目前大多的做法還是依DOM載入為主。要偵測圖片載入會比較麻煩。畢竟，你並不知道它需要的載入時間。

以前類似的東西我也曾做過，大約將我以前的做法給你參考下

1.假動作進度條：
其實就是先用假象微動，讓進度條看起來有在跑。我之前的做法是讓它每秒前進1~3%(隨機值，太快就調低點)。但會先收集所有可能載入的節點。並后分%數比例。微動的前進值最多只到99%。就不會再前進。(要不然還沒跑完就出現100%的載入完成情況也很奇怪)

2.預估值計算：
先找出所有的節點。由其是img的。每個img的節點先計算1~2秒的可能性時間。並切區段。
一般來說，這是我後期在某家相片行做的。因為網頁載入的時間幾乎都是拖在img的載入。所以我就捨棄了dom載入計算。只針對了img去做載入。當時客戶的圖片都是很大的。平均一張圖都是100m起跳。(雖然有思考過做縮圖，但客戶要求不要用縮圖，會失真)

每一頁約至少50張圖。所以我就只針對所有img的load事件，並記錄他的總數量。當然，每張圖為了要求準確度，再一開始我就已經將所有圖片的容量數先行給與js做參數了。所以我依容量及載入的時間下去做計算來產生進度圖的處理。

程式碼的部份，因為那是很早期做的，早就已經不在我手上。現在叫我再用javascript重打的話。
也很懶了。(雖然很想用jquery再寫一套就是了)

就只告知理念吧。有些人說的網站，大多都可以拿來做參考。另外還有「js預載圖」你也可以找找。你會發現很多dom中load的判斷控制。

目前我想得到的只有透過 AJAX 取得資源
這樣可以透過 progress 事件計算出進度。
不過這樣做的話，前端要修改載入的資源的方式。
後端要確認有傳送 Content-length 的 Header 提供計算。

如果真的要用，可以挑出大型的檔案用 ajax 。
至於小型的就稍微用估計的即可。