我试图根据它们的高度在列中订购一些图像,我有以下代码。 问题是即使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);
答案 0 :(得分:0)
其中一个问题是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()
。