如何将远程图片URL的尺寸返回至可复用的本地变量？

嘿，这个问题我太熟了！核心原因是图片的load事件是异步触发的——你的函数执行完的时候，图片可能还没加载完成，所以你在load回调里写的return根本传不到函数外部，自然拿不到值。咱们来一步步解决这个问题：

为什么原代码拿不到返回值？ #

先看你的原代码：

function getMeta(url){ 
  $j("<img/>",{ 
    load : function(){ 
      alert(this.width+' '+this.height); 
      // return this.width; 这里的return只能给load回调函数，外部拿不到
    }, 
    src : url 
  }); 
}

函数getMeta会立刻执行完并返回undefined，而load回调要等图片加载完成才会触发，这时候函数早就结束了，内部的return对外部毫无意义。

解决方案1：使用回调函数（传统异步处理方式） #

我们可以把后续需要处理尺寸的逻辑写成一个回调函数，等图片加载完成后再调用这个回调，把尺寸传进去：

function getMeta(url, callback) {
  $j("<img/>", {
    load: function() {
      // 加载完成后，把尺寸传给回调函数
      callback(this.width, this.height);
    },
    // 建议加上错误处理，避免图片加载失败时卡住
    error: function() {
      callback(null, null, "图片加载失败");
    },
    src: url
  });
}

// 使用示例：
getMeta("你的远程图片URL", function(width, height, error) {
  if (error) {
    console.error(error);
    return;
  }
  // 这里就能拿到正确的尺寸，存到变量里或者直接用
  const remoteWidth = width;
  const remoteHeight = height;
  
  // 比如设置本地图片的尺寸
  $j("#本地图片ID").width(remoteWidth).height(remoteHeight);
  
  // 也可以把尺寸存到全局变量（如果需要跨地方用）
  window.remoteImgDimensions = { width: remoteWidth, height: remoteHeight };
});

解决方案2：使用Promise + async/await（现代异步处理方式） #

如果觉得回调嵌套太麻烦，可以用Promise来封装，配合async/await让代码看起来更像同步逻辑：

function getMeta(url) {
  return new Promise((resolve, reject) => {
    $j("<img/>", {
      load: function() {
        // 加载成功，把尺寸对象传出去
        resolve({ width: this.width, height: this.height });
      },
      error: function() {
        // 加载失败，抛出错误
        reject(new Error("无法加载远程图片"));
      },
      src: url
    });
  });
}

// 使用示例：
async function handleImageSize() {
  try {
    // 等待图片加载完成，拿到尺寸
    const size = await getMeta("你的远程图片URL");
    
    // 存到变量里
    const imgWidth = size.width;
    const imgHeight = size.height;
    
    // 复用这个尺寸做你想做的事
    console.log("远程图片尺寸：", imgWidth, imgHeight);
    $j("#本地图片ID").css({ width: imgWidth, height: imgHeight });
    
    // 存到全局变量
    window.remoteImgSize = size;
  } catch (err) {
    console.error(err);
  }
}

// 调用函数
handleImageSize();

进阶优化：缓存已加载的图片尺寸 #

如果同一个图片URL可能被多次调用，我们可以缓存已经获取到的尺寸，避免重复加载图片，提升性能：

// 缓存对象，存URL对应的尺寸
const imgSizeCache = {};

function getMeta(url) {
  // 先检查缓存，有就直接返回
  if (imgSizeCache[url]) {
    return Promise.resolve(imgSizeCache[url]);
  }
  
  return new Promise((resolve, reject) => {
    $j("<img/>", {
      load: function() {
        const size = { width: this.width, height: this.height };
        // 存入缓存
        imgSizeCache[url] = size;
        resolve(size);
      },
      error: function() {
        reject(new Error("图片加载失败"));
      },
      src: url
    });
  });
}

记住：异步操作的核心就是不要试图同步返回异步结果，必须等异步事件完成后，在对应的回调、Promise的resolve里处理后续逻辑，这样才能拿到正确的尺寸值。

内容的提问来源于stack exchange，提问作者arch tech