为什么我的Javascript变量没有在此函数之外设置？

Question

我试图获取图像的尺寸,以便稍后在我的脚本中使用.直接用jQuery选择img元素工作正常并且更容易,但它在webkit浏览器中不起作用(在函数调用时不加载图像).我正在尝试使用jquery load()函数实现此解决方案,其中在图像加载后设置变量.

为什么我的变量没有按照需要设置？

function startSlider() {
  if (1 == 1) {
  var bImg = $('#banner img');
  var bWidth = 111, bHeight = 222;
  $("<img/>")
    .attr("src", $(bImg).attr("src"))
    .load(function() {
      bWidth = this.width;
      bHeight = this.height;
      console.log('inner: ' + this.height);
    });
  console.log('outer: ' + bHeight);
  }
}

 $(window).load(startSlider(skin));

产量

outer: 222
inner: 333

示例来源

<div id="banner">
   <img src="/path/to/image.jpg" />
</div>

Answer 1

.load() 是一个异步回调,这意味着它将在浏览器下载完图像文件时发生.

您绑定.load()到您的图像,然后立即记录高度.由于.load()回调尚未运行,因此将输出默认高度.

您需要等到.load()执行完毕后再继续执行依赖于图像高度的任何其他逻辑.