1

高さに基づいていくつかの画像を列に並べようとしていますが、次のコードがあります。問題は、imgHeights.length が正常に機能しても、imgHeights[i] (redrawThumbs 関数内) が値を返さないことです。私は何を間違っていますか？ありがとう =)

function redrawThumbs(imgHeights){
  // some irrelevant code here

  // initialise an array that will hold all the column's heights
  var colHeights = new Array(cols);
  for(a=0; a <= colHeights.length - 1; ++a){
    colHeights[a] = 0;
  }

  // take each image's height and add it to the shortest column
  for(i=0; i <= imgHeights.length - 1; ++i){
    var shortestCol = 0;

    for(c=0; c <= colHeights.length - 2; ++c){
      if(colHeights[c+1] < colHeights[c]){
        shortestCol = colHeights[c+1];
      }
    }

    alert("imgHeights[" + i + "] " + imgHeights[i]);

    colHeights[shortestCol] += imgHeights[i];
  }
}

// make an array of image heights
var imgHeights = new Array(totalThumbs);    
for(i=1; i <= totalThumbs; ++i){
  var img = new Image();
  img.onload = function(){
  imgHeights[i-1] = this.height;
}
img.src = i + ".jpg";

// call function that orders the images
redrawThumbs(imgHeights);
4

1 に答える 1

0

問題の 1 つは、i変数が値ではなく参照によってキャプチャされるため、 のすべてのコールバックがimg.onloadの同じ値を取得することですi。onload割り当てを次のように変更することを検討してください。

var loadedCount = 0;
img.onload = (function (i) { 
    return function () { 
        imgHeights[i - 1] = this.height;
        if (++loadedCount == totalThumbs) allLoaded();
    };
})(i);

function allLoaded() {
    // called after all the images have been loaded.
}

iこれは、自動実行関数の実行時点での値のコピーをキャプチャし、allLoaded()すべての画像が読み込まれた後に呼び出します。

于 2012-05-04T23:12:00.943 に答える