以与图像相同的尺寸加载哪些 html 元素有助于避免 DOM 重排？
What html elements loaded at the same dimensions as an image help avoid DOM reflow?
我在某个网站的页面顶部有一些大图片。 Post 标题在图像上分层并利用了一些透明度（我想这会增加问题）。图像加载较晚，因为它们是折叠上方的突出元素，导致非常明显的 DOM 回流。基本上页面的其余部分加载，然后被延迟加载的图像推下。
是否有 html 元素可以围绕图像的最终着陆位置，以防止其他内容加载到图像位置并因此成为 "pushed down?"
这里的想法是采用与要加载的图像具有相同尺寸和位置的块 html 元素。在这种情况下，即使图像尚未加载，也没有 "jolt" 将其他内容推送到屏幕下方。我一直在寻找这方面的资源或例子。但是还没有找到。
您可以使用 width 和 height 属性（在 img 标签本身）在 HTML 中定义图像大小（以像素为单位）。您还可以使用 CSS 来定义 img 元素的宽度和高度。 This answer 提供了有关两者如何交互的更多详细信息。
通过定义大小，图像的 space 将在加载图像之前分配。事实上，如果你这样定义大小，即使实际图像大小不同，浏览器也会显示指定space中的图像。
您还可以在 CSS 中使用定义大小的图像周围放置一个包装器 div，这样您就不会 运行 定义两者的任何奇怪的工件图像的宽度和高度（如果它与图像的实际尺寸不同）。
正如@Grzegorz T 在评论中指出的那样，您应该尝试减小图像文件的大小，以便网站总体上加载速度更快。
我在某个网站的页面顶部有一些大图片。 Post 标题在图像上分层并利用了一些透明度（我想这会增加问题）。图像加载较晚，因为它们是折叠上方的突出元素，导致非常明显的 DOM 回流。基本上页面的其余部分加载，然后被延迟加载的图像推下。
是否有 html 元素可以围绕图像的最终着陆位置，以防止其他内容加载到图像位置并因此成为 "pushed down?"
这里的想法是采用与要加载的图像具有相同尺寸和位置的块 html 元素。在这种情况下，即使图像尚未加载，也没有 "jolt" 将其他内容推送到屏幕下方。我一直在寻找这方面的资源或例子。但是还没有找到。
您可以使用 width 和 height 属性（在 img 标签本身）在 HTML 中定义图像大小（以像素为单位）。您还可以使用 CSS 来定义 img 元素的宽度和高度。 This answer 提供了有关两者如何交互的更多详细信息。
通过定义大小，图像的 space 将在加载图像之前分配。事实上，如果你这样定义大小，即使实际图像大小不同，浏览器也会显示指定space中的图像。
您还可以在 CSS 中使用定义大小的图像周围放置一个包装器 div，这样您就不会 运行 定义两者的任何奇怪的工件图像的宽度和高度（如果它与图像的实际尺寸不同）。
正如@Grzegorz T 在评论中指出的那样，您应该尝试减小图像文件的大小，以便网站总体上加载速度更快。