图像高度和宽度自动？

Question

出于效果目的，我是否可以自动生成img代码自动生成width和height属性？

通常，有关网络效果的文章指出，包含其width和height属性标记的图片可能加载速度更快，从而使浏览器无需在加载过程中搜索这些值。

Answer 1

宽度和高度属性不使图像加载更快，浏览器不“搜索”这些值。添加它们的做法是在页面上创建一个占位符，允许浏览器在页面的适当位置呈现其他元素，而不必在图像最终加载后重新翻转页面。

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

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

Answer 2

我认为这不是一个加载更快但可能更快渲染的问题......

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

来自the API：

  

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