做一個<img>標簽與頁面的 rest 一起加載還是之后？

Question

我是 HTML 編程的新手，我正在嘗試理解 html 中的<img>標簽

但我無法理解何時加載圖像
例如在這段代碼中：

 #pic { display:inline-block; background-image:url('https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg'); height:20rem; width:35rem; }

 <div>Hello how are you?</div> <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"> <br> <span id="pic"></span> <div>I'm good wbu?</div>

<img>是在加載其他標簽時先加載還是在加載之后或同時加載？
當瀏覽器加載新網頁時，DOM 元素的加載順序到底是什么？
相同的規則是否適用於background-image ？

Answer 1

Html 代碼逐行渲染，在您的代碼中 img 標簽在您的第一個 div 標簽之后渲染，您將 https src 給圖像，瀏覽器渲染機器不會等待圖像可用然后渲染下一行。 這就是為什么你會看到有時一開始我們可以看到網站的所有部分，除了圖像。

Img 標簽與所有標簽一樣呈現。 但是渲染圖像需要時間