问题:
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延时打印的时候就可以正确的得到其宽高。
回答:
是
不是
另外我的看法:
用
setTimeout
延时获取到图片的尺寸虽然成功了, 但这前提是, 延时代码执行的时候, 浏览器已加载完毕图片;正确的姿势如 @浴火小青春 所言, 是在
img
的load
事件结束时(后)再获取其尺寸. 这个回调你可以用onload
属性来做, 也可以用addEventListener
来做;图片就算不在 DOM 里也可能被浏览器加载, 至少我用 Chrome 实例一个
Image
对象并赋值给其src
属性后, 浏览器就请求了这张图片;提前从服务端那里拿到图片的尺寸, 就没这么折腾了.