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

我正在尝试获取图像的尺寸以便稍后在我的脚本中使用。直接使用jQuery选择img元素可以很好地工作，但是它在webkit浏览器中不起作用（在函数调用时图像未加载）。我试图通过使用jquery load（）函数来加载图像后设置变量的解决方案。为什么我的Javascript变量没有被设置在这个函数之外？

为什么我的变量没有被根据需要设定？

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>

来源

2012-10-18 Ryan Fisher

我不相信你会得到“外部”线** **后“内部”一个 – zerkms

谢谢，我让他们误逆转。 –

什么图像是由JavaScript创建的？或者只是通过html标签创建？ – viyancs

是异步回调，这意味着它将发生在浏览器下载完的图像文件的时间。

要绑定你的形象，然后立即登录高度。由于回调尚未运行，它将输出默认高度。

您需要等到已完成与依赖于图像高度的任何进一步的逻辑继续之前执行。

来源

2012-10-18 04:02:10

这不是我在做什么？ '的console.log（“内：” + this.height）;'输出的333 –

正确的值这是正确的，你只需要记住，你的回调函数（包括本的console.log）将在某个时候被调用未来，不是一蹴而就的。假设你想一旦你的图像高度揭开序幕一些其他的功能，你可以这样做：http://jsfiddle.net/P6dqv/ –

这仍然没有设置正确的值：[http://jsfiddle.net /P6dqv/](http://jsfiddle.net/P6dqv/） –

startSlider()打来电话，$("<img/>")没有准备好或者没有完成加载，这就是为什么你不能改变你的变量。

确保你在你的代码中使用DOMContentLoaded，DOMContentLoaded是事件将是火元素的解析结束时，在jQuery中您可以使用此功能

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

来源

2012-10-18 04:30:18 viyancs

对不起，我应该添加对函数的调用：'$（window）.load（startSlider（））;'该函数在加载DOM（AFAIK）之前不会被调用。 –

使用此：

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

来源

2012-10-18 06:32:23 ARUNRAJ

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

回答

相关问题