為什么我的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()完成執行才能繼續執行依賴於圖像高度的任何其他邏輯。

Answer 2

1. startSlider()和$("<img/>")未就緒或未完成加載，這就是您無法更改變量的原因。

確保你在你的代碼上使用DOMContentLoaded ，DOMContentLoaded是在解析元素完成時會觸發事件，在jquery中你可以使用這個函數

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

Answer 3

用這個：

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