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()完成执行后再继续使用依赖于图像高度的任何其他逻辑。

Answer 2

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

确保在代码上使用DOMContentLoaded，DOMContentLoaded是在解析元素时将触发的事件，在jquery中你可以使用这个函数

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

Answer 3

使用此：

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

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

3 个答案: