Javascript Image.onload 触发太快

Question

这可能看起来像一个重复的问题，但我向你保证它不是。

我正在从服务器端 servlet 提供的 AJAX 调用加载多个动态图像。我需要将图像分成三部分，但在加载图像之前我不能这样做。这让我想到了我的问题。我为每个图像都有一个 onload 触发器，但它在图像属性可用(例如高度、宽度等)之前触发。所以我的代码正在故障转移到错误处理。

var imageData = [];

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

function preLoadImages() {
    <c:forEach var="table" items="${tables}">
    var tmpImage = new imageObject(<c:out value="${table.tableRowId}" />);
    imageData.push(tmpImage);
    </c:forEach>

    for (var i = 0; i < imageData.length; i++) {
        ajaxGetmainImages(i);
    }
}

function imageObject(id) {
    this.id = id;
    this.mainImage = new Image();
    this.topImage = new Image();
    this.middleImage = new Image();
    this.bottomImage = new Image();
}

function split_3(i) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext("2d");

    if (imageData[i].mainImage.height > 2500) {
        $("#error_container-" + imageData[i].id).attr('display', "none");
        //document.getElementById('error_container').style.display = "none";

        var newWidth = imageData[i].mainImage.width;
        var newHeight = imageData[i].mainImage.height / 3;
        canvas.width = newWidth;
        canvas.height = newHeight;

        ctx.drawImage(imageData[i].mainImage, 0, 0, newWidth, newHeight, 0, 0, newWidth, newHeight);
        imageData[i].topImage.src = canvas.toDataURL();

        ctx.drawImage(imageData[i].mainImage, 0, (newHeight), newWidth, newHeight, 0, 0, newWidth, newHeight);
        imageData[i].middleImage.src = canvas.toDataURL();

        ctx.drawImage(imageData[i].mainImage, 0, ((newHeight * 2)), newWidth, newHeight, 0, 0, newWidth, newHeight);
        imageData[i].bottomImage.src = canvas.toDataURL();

        $("#left_image-" + imageData[i].id).attr('src', imageData[i].topImage.src);
        $("#right_image-" + imageData[i].id).attr('src', imageData[i].bottomImage.src);
    }
    else {
        $("#slider_container-" + imageData[i].id).attr('display', "none");
        $("#error_image-" + imageData[i].id).attr('src', imageData[i].mainImage.src);
    }

}

function ajaxGetmainImages(i)
{
    $.ajax({
        type: "GET",
        url: baseURL + '/admin/' + imageData[i].id,
        dataType: "json",
        async: true,
        success:function(data){
            imageData[i].mainImage.onload = split_3(i);
            imageData[i].mainImage.src = "data:image/jpg;base64," + data.image;
            //imageData[i].mainImage.addEventListener("load", split_3(i));
        },
        error:function(result){
            //$("#" + id + 'status').html("<img src='../resources/img/status-unknown-16.png' alt='Unknown'>");
        }
    });
}

图像 ID 是通过提供页面的 servlet 中的模型提供的。有了它，我构建了唯一的 URL 来轮询每个图像。此代码有效。我让它在一个单独的页面中运行，我只处理一个图像(图像被分割以便可以使用 slider 来比较图像)。但是，当我尝试使用多个图像时，图像的高度在 onload 函数期间始终为 0。如果我在 split_3 函数中设置断点，我可以看到当处理下一个图像时，前一个图像现在具有非零高度值(正确值)。

我已经尝试过 Chrome Stable、Chrome Beta、Chrome Dev、Firefox 和 Opera，结果都是一样的。 onload 似乎触发得太早了，我不知道为什么。

编辑:一些附加信息。图像最终正在加载。如果服务器端代码无法获取正确的图像，它会提供一个默认的占位符(因此是 else > "error_image")。但是占位符不需要拆分。所以我在我的页面上得到的是错误占位符中的整个 3x 高度图像。这是最终的问题。

Answer 1

addEventListener 的参数必须是对函数的引用。您立即调用该函数并将结果传递给 addEventListener。应该是:

imageData[i].mainImage.addEventListener("load", function() {
    split_3(i));
});

或使用onload:

imageData[i].onload = function() { split_3(i); };