使用Image预加载填坑

问题：
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() // 0

loadImage() // 300

问题描述：
首次执行函数 loadImage()的时候输出0，等过一小会儿再执行这个函数的时候输出图片的原始大小了

原因：

• 当给 img.src 赋值是，其实是发送了一次对图片的http 请求（发送请求是一个异步过程），那么当请求还没有完成时，我们同步执行 console.log 操作就无法获取到图片原始尺寸，而输出了默认值 0。

• 当图片请求完成时，就取到了图片的width；当我们没有单独在css 或 dom 节点中设置 img 的width 、height 值时，width 就会把 naturalWidth（原始尺寸）作为默认值

优化：
其实Image Web Api提供了很多钩子，像onerror、onload

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.onload事件，所以在这里要判断一下图片是不是已加载完成

       let { naturalWidth } = img // 获取图片的原始大小 

       console.log(naturalWidth) 

 } else {
      img.onload = function () { // 当图片加载完毕，添加处理方法

            let { naturalWidth } = img // 获取图片的原始大小 

            console.log(naturalWidth) 

      }

      img.onerror = function () {

          alert('error') 

      } 
  }
}

loadImage() // 300

followme.png