图像的高度和宽度自动吗？

Question

是否可以使我的img标签出于性能目的自动生成其width和height属性？

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

Answer 1

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

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

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

Answer 2

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

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

从API中 ：

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