使用Image预加载填坑

Image预加载技术解析与优化

最新推荐文章于 2025-06-28 10:55:11 发布

原创最新推荐文章于 2025-06-28 10:55:11 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#使用Image预加载填坑

js 专栏收录该内容

51 篇文章

订阅专栏

当使用img.src赋值时，实际上启动了一个异步的HTTP请求。在请求完成前，console.log会输出图片默认宽度0。一旦请求完成，图片的width将变为naturalWidth（原始尺寸）。为解决这个问题，可以利用Image对象的onload和onerror事件进行预加载优化。

问题：
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

作者：coder_sherry
链接：https://www.jianshu.com/p/4878f1be8e64
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。