javascript - 图像高度和宽度自动？

Question

出于性能目的，是否可以让我的img标签自动生成它们的width和height属性？

通常，有关 Web 性能的文章指出，包含其标签width和height属性标签的图像可能会加载得更快，从而使浏览器不必在加载过程中搜索这些值。

Answer 1

width 和 height 属性不会使图像加载更快，并且浏览器不会“搜索”这些值。添加它们的作用是在页面上创建一个占位符，允许浏览器在页面上的适当位置呈现其他元素，而无需在图像最终加载后重新排列页面。

要回答您的问题，除了一些从文件中检索图像宽度和高度并将属性写入页面的服务器端解决方案之外，无法自动生成这些属性。但是，除非您已经在进行其他图像处理（例如生成缩略图），否则这太过分了，并且可能会在服务器端浪费更多的时间，而不是在客户端节省的时间。

此外，在某些情况下，例如实现响应式设计，实际上最好不要添加属性，因为您需要将其留给浏览器来确定页面应该如何流动以及图像应该根据设备的分辨率显示.

Answer 2

我相信不是更快加载的问题，而是更快渲染的问题......

无论如何，您可以使用 jQuery 来生成这些属性，但它可能不会改变任何东西，因为 jQuery 也需要时间来更改这些属性，并且图像应该已经加载以获取其尺寸。

从API：

如果代码依赖于加载的资产（例如，如果需要图像的尺寸），则应将代码放置在加载事件的处理程序中。