在浏览器未加载图片之前获取图片宽高？

Question

问题：1、如果浏览器还没有加载的图片，是不是没有方法在加载之前获取其宽高？2、js脚本按顺序执行，但当有dom添加删除等操作的时候，其加载、渲染的操作是不是采用异步执行的？问题场景：尝试在浏览器还没有渲染图片之前在脚本中获得它的宽高：var img = new Image(); img.src = 'images/1.jpg'; console.log(img.width,img.height);此时会打印的会是：0 0；但当我的页面中已经使用过该图片并且已经渲染在页面上的时候，以上代码就会打印图片原本的宽高。于是我尝试着新建图片元素后加到文档中，然后再获取其宽高：var newImg = document.createElement('img');newImg.src = 'images/1.jpg'; document.body.appendChild(newImg); console.log(newImg.width,newImg.height);打印还是：0 0；只有等到其真正完成了图片的渲染操作后才可以正确的打印，所以当我把打印的操作使用setTimeout延时打印的时候就可以正确的得到其宽高。

Answer 1

回答:

1. 是

2. 不是

另外我的看法:

1. 用 setTimeout 延时获取到图片的尺寸虽然成功了, 但这前提是, 延时代码执行的时候, 浏览器已加载完毕图片;

2. 正确的姿势如 @浴火小青春 所言, 是在 img 的 load 事件结束时(后)再获取其尺寸. 这个回调你可以用 onload 属性来做, 也可以用 addEventListener 来做;

3. 图片就算不在 DOM 里也可能被浏览器加载, 至少我用 Chrome 实例一个 Image 对象并赋值给其 src 属性后, 浏览器就请求了这张图片;

4. 提前从服务端那里拿到图片的尺寸, 就没这么折腾了.