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

问题描述

问 题

问题：
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延时打印的时候就可以正确的得到其宽高。

解决方案

回答:

1. 是

2. 不是

另外我的看法:

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

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

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

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

这篇关于javascript - 在浏览器未加载图片之前获取图片宽高？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！