加載DOM和CSS但不加載圖像后，如何觸發javascript？

Question

在加載DOM和CSS之后，我需要啟動一些JavaScript，但不能啟動圖片。 我相信那是在document.ready之后，但在window.onload之前。 有人知道如何實現這一目標嗎？

我本來是想通過document.styleSheets進行迭代在document.styleSheets之后加載CSS，但這感覺不是一個好主意。

更新：出現這種異常要求的原因是，我需要預測將要渲染的圖像的大小，該大小由css確定。 將javascript移至頁面底部即可解決此問題，但我希望我的腳本在情況並非如此時也能正常工作。

Answer 1

您需要DOMContentLoaded事件，以及在所有樣式表之后鏈接的外部腳本。

從鏈接頁面：

如果在<link rel="stylesheet" ...> <script>之后有<script>在加載樣式表之前，頁面將無法完成解析-並且DOMContentLoaded將不會觸發。

Answer 2

您可以嘗試使用一個小的圖像，並將處理程序添加到其onload事件中，請參見image.onload事件和瀏覽器緩存將帶有該小圖像的代碼添加到document.ready。

請您能詳細說明一下您的用例，為什么將代碼放在document.ready事件處理程序上對您沒有幫助？

---

另一個選擇是將處理程序附加到每個樣式標簽的加載上，並且每個此處理程序增加一些計數器，如果counter = style tags計數，則您將同時檢查該計數器。 （您可以在添加事件處理程序的同時確定樣式標簽的數量）。 當計數器達到樣式標簽的數量時，您可以觸發您的自定義事件，該事件可用於運行代碼。 但是，如果某些樣式表由於某種原因無法加載，則此操作將失敗，因此，如果上述邏輯失敗，我建議添加一個后備代碼以在window.onload上執行代碼。

Answer 3

首先執行DOMContentLoaded 。

但

如果我將這樣的圖像放在html中。 並且此圖像被緩存，然后圖像加載在DOMContentLoaded之前執行。

html

<img onload="console.log('imgLoaded');" src="http://placekitten.com/16/16">

js

window.addEventListener('DOMContentLoaded',function(){
 console.log('DOMContentLoaded')
},false);

演示

http://jsfiddle.net/yE9qU/

輸出：

• DOMContentLoaded
• img已加載
• imgLoaded <-----錯誤
• DOMContentLoaded

也無法將onload事件直接放在圖像上。

http://jsfiddle.net/yE9qU/1/

輸出：

• 10 10
• 10 10
• 16 16 <-----錯誤
• 10 10

這意味着在所有內容加載之前無法獲得正確的CSS分配大小 ...因此在window.onload之后

解決方案...

取決於您的需求。

1. 如果沒有太多圖像，我將在執行 load或DOMContentLoaded 之后添加它們 。

2. 就像您說的那樣將腳本放在頁面底部。 但不能確定圖像是否已經緩存。

3. 一種。 在所有內容加載后進行數學運算 （僅幾毫秒）

4. b。 隱藏圖像，直到完成數學運算為止。

如果您確切地說明了為什么在那一刻需要圖像尺寸的原因，那么我們很容易找到合適的替代解決方案。