代码是与页面的<img>其余部分一起加载还是在页面的其余部分之后加载？

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标签与所有标签一样呈现。但是渲染图像需要时间