3

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

3 回答 3

5

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

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

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

于 2012-10-18T04:02:10.130 回答
1

用这个：

$(document).ready(function () {
    startSlider();
});
于 2012-10-18T06:32:23.833 回答
1
  1. startSlider()调用并且$("<img/>")未准备好或未完成加载，这就是您无法更改变量的原因。

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

      $(document).ready(function(){
        console.log('DOM Loaded (DOMContentLoaded)');
        //place your function in here
      });
于 2012-10-18T04:30:18.243 回答