javascript - 在浏览器未加载图片之前获取图片宽高?
PHP中文网
PHP中文网 2017-04-11 13:01:57
0
1
316

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

PHP中文网
PHP中文网

认证0级讲师

reply all(1)
阿神

回答:

  1. 不是

另外我的看法:

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

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

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

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

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!