为什么我的 Javascript 变量没有设置在这个函数之外？答案

【问题标题】：Why is my Javascript variable not being set outside of this function?为什么我的 Javascript 变量没有设置在这个函数之外？
【发布时间】：2012-10-18 03:57:43
【问题描述】：

我正在尝试获取图像的尺寸，以便稍后在我的脚本中使用。使用 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>

【问题讨论】：

我不相信你得到“外”行之后“内”行
谢谢，我把它们弄错了。
图片是由javascript创建的？或者只是通过 html 标签创建？
图片在文档中是原生的，不是由javascript创建的。 $('#banner img') 引用加载文档中的 HTML 标记。我将添加示例源。
当 bImg 已经是一个 jQuery 对象时，你为什么还要$(bImg)？在设置 src 之前设置负载。并了解异步和同步调用。

标签： javascript jquery scope

【解决方案1】：

.load()是一个异步回调，意味着它会在浏览器完成图片文件下载的时候发生。

您将.load() 绑定到您的图像，然后立即记录高度。因为.load()回调还没有运行，所以会输出默认高度。

您需要等到.load() 完成执行，然后才能继续任何依赖图像高度的进一步逻辑。

【讨论】：

这不是我在做的吗？ console.log('inner: ' + this.height); 输出正确的值 333
这是正确的，你只需要记住你的回调函数（包括这个console.log）将在未来的某个时候被调用，而不是马上。假设您想在获得图像高度后启动其他功能，您可以这样做：jsfiddle.net/P6dqv
这仍然没有设置正确的值：http://jsfiddle.net/P6dqv/
好的，我可能误解了你在这里想要做什么。您正在加载在内存中创建图像（不附加到 DOM），并为其提供与原始图像相同的 src。您的新内存图像没有宽度/高度，因为需要将其附加到 DOM 才能进行此计算。你想做这样的事情吗？ jsfiddle.net/P6dqv/3
@RyanFisher 我的错误，可以使用图像的本机 .width/.height 属性在 DOM 之外检索图像的宽度/高度。我对为什么您的“外部”高度检查失败的原始答案仍然适用：jsfiddle.net/P6dqv/5

【解决方案2】：

使用这个：

$(document).ready(function () {
    startSlider();
});

【讨论】：

【解决方案3】：

startSlider() 已调用且 $("<img/>") 未准备好或未完成加载，这就是您无法更改变量的原因。

确保您在代码中使用DOMContentLoaded，DOMContentLoaded 是元素解析完成时触发的事件，在 jquery 中您可以使用此功能

      $(document).ready(function(){
        console.log('DOM Loaded (DOMContentLoaded)');
        //place your function in here
      });

【讨论】：

抱歉，我应该添加对函数的调用：$(window).load(startSlider()); 在加载 DOM (AFAIK) 之前不会调用该函数。