07月18, 2018

分享一些小细节

img.src

问题: img.src 属性赋值后,获取图片宽高有误

demo

function myFunction() {
    var img = new Image();
    img.src = "https://static.imwineki.cn/static/upload/20170130/logo.jpg";
    var x = img.naturalWidth;
    console.log(x)
}
myFunction()  //0
myFunction() //1239

问题描述

首次执行 myFunction() 可以看到输出 0 , 第二次输出的时候就可以获取到 图片的原始尺寸了。

原因

  • 当给 img.src 赋值是,其实是发送了一次对图片的http 请求(发送请求是一个异步过程),那么当请求还没有完成时,我们同步执行 console.log 操作就无法获取到图片原始尺寸,而输出了默认值 0。
  • 当图片请求完成时,这时你输出 img.width 你会发现值与 img.naturalWidth 完全相同,这时因为,当我们没有单独在css 或 dom 节点中设置 img 的width 、height 值时,width 就会把 naturalWidth(原始尺寸)作为默认值。

本文链接:https://www.imwineki.cn/post/detail.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。