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
  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 に答える
1

これを使って：

$(document).ready(function () {
    startSlider();
});
于 2012-10-18T06:32:23.833 に答える