爲什麼我的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變量沒有被設置在這個函數之外？

回答

相關問題