问题：
img.src属性赋值后，获取图片宽高有误
示例：
function loadImage () { let img = new Image() // 将会创建一个新的HTMLImageElement实例，它的功能等价于document.createElement(‘img’)
img.src = 'https://upload.jianshu.io/users/upload_avatars/6522842/f45df573-27b5-4853-b4d9-308e402ed9ff.jpeg?imageMogr2/auto-orient/strip'
let { naturalWidth } = img // 获取图片的原始大小
console.log(naturalWidth)
}
loadImage() // 0loadImage() // 300问题描述：
首次执行函数 loadImage()的时候输出0，等过一小会儿再执行这个函数的时候输出图片的原始大小了
原因：
当给 img.src 赋值是，其实是发送了一次对图片的http 请求（发送请求是一个异步过程），那么当请求还没有完成时，我们同步执行 console.log 操作就无法获取到图片原始尺寸，而输出了默认值 0。
当图片请求完成时，就取到了图片的width；当我们没有单独在css 或 dom 节点中设置 img 的width 、height 值时，width 就会把 naturalWidth（原始尺寸）作为默认值
优化：
其实Image Web Api提供了很多钩子，像、
function loadImage () { let img = new Image() // 将会创建一个新的HTMLImageElement实例，它的功能等价于 document.createElement(‘img’)
img.src = 'https://upload.jianshu.io/users/upload_avatars/6522842/f45df573-27b5-4853-b4d9-308e402ed9ff.jpeg?imageMogr2/auto-orient/strip'
if (img.complete) { // 当加载已被浏览器缓存的图片时，并不会触发img.事件，所以在这里要判断一下图片是不是已加载完成
let { naturalWidth } = img // 获取图片的原始大小
console.log(naturalWidth)
} else {
img. = function () { // 当图片加载完毕，添加处理方法
let { naturalWidth } = img // 获取图片的原始大小
console.log(naturalWidth)
}
img. = function () {
alert('error')
}
}
}
loadImage() // 300
作者：程序媛sherry
链接：https://www.jianshu.com/p/4878f1be8e64
