获取JavaScript中加载的图像宽度

Question

我在我的JavaScript代码中附加了一个图像,但想要获得正确的宽度和高度.这可能吗？我的代码看起来像这样:

$('body').append('<img src="path.jpg" width="'
        + w + '" height="' + h + '" alt="" />');

---

我知道如何在加载后获得图像宽度,但我正在加载img并希望直接获得相应的宽度和高度.有小费吗？

Answer 1

HTML 规范建议指定height和widthfor<img>作为视觉代理的提示，该代理混合标记和样式规则来构建 HTML 文档的视觉表示。在 CSS 盒模型中，图像尺寸是固有的，即它们隐含在二进制 blob 中。这意味着浏览器必须等待 HTTP 响应，然后才能决定图像有多大，从而决定如何布局和定位兄弟姐妹和父母。在 HTML 页面中指定尺寸有助于浏览器快速呈现页面，因为它可以在从服务器下载图像之前指定宽度和高度。

此时应该清楚的是，在下载之前无法在客户端上访问图像宽度。当 Javascript 知道的时候，浏览器也已经知道了，而你说这对于你的要求来说已经太晚了。

因此，提示浏览器的唯一选择是在服务器端测量图像。它可以在每个请求的基础上完成（但这会浪费资源），或者可以在第一次上传图像时完成一次（然后从数据库中检索），或者最终可以假设它是恒定的，例如如果它是个人资料图片，您的服务将始终增大或缩小到恰好W x H像素大（这可能是一个配置参数）。