Javascript Image.onload触发过快

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

我正在从服务器端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'>");
        }
    });
}

var-imageData=[]；
$（文档）.ready（函数（）{
预加载图像（）；
});
函数preload images（）{
var tmpImage=新的imageObject（）；
imageData.push（tmpImage）；
对于（var i=0；i2500）{
$（“#error_container-”+imageData[i].id）.attr（'display'，'none”）；
//document.getElementById（'error_container'）.style.display=“无”；
var newWidth=imageData[i].mainImage.width；
var newHeight=imageData[i].mainImage.height/3；
canvas.width=newWidth；
canvas.height=新高度；
drawImage（imageData[i].mainImage，0,0，newWidth，newHeight，0,0，newWidth，newHeight）；
imageData[i].topImage.src=canvas.toDataURL（）；
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（）；
$（“#左#图像-”+imageData[i].id）.attr（'src'，imageData[i].topImage.src）；
$（“#right_image-”+imageData[i].id）.attr（'src'，imageData[i].bottomImage.src）；
}
否则{
$（“#slider_container-”+imageData[i].id）.attr（'display'，'none”）；
$（“#error_image-”+imageData[i].id）.attr（'src'，imageData[i].mainImage.src）；
}
}
函数ajaxGetmainImages（i）
{
$.ajax({
键入：“获取”，
url:baseURL+'/admin/'+imageData[i].id，
数据类型：“json”，
async:true，
成功：功能（数据）{
imageData[i].mainImage.onload=split_3（i）；
imageData[i].mainImage.src=“data:image/jpg；base64，”+data.image；
//imageData[i].mainImage.addEventListener（“加载”，拆分_3（i））；
},
错误：函数（结果）{
//$（“#”+id+“status”）.html（“”）；
}
});
}

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

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

---

编辑：一些附加信息。图像最终被加载。如果服务器端代码无法获取正确的图像，它将提供一个默认占位符（因此出现else>“错误图像”）。但不需要拆分占位符。因此，我在页面上看到的是错误占位符中的整个3倍高度的图像。这是最终的问题。

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

addEventListener

。应该是：

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

或使用

onload

：

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

---

感谢所有回应的人。我发现了这个问题。问题是我调用的onload方法如下：

tableData[i].tableImage.onload = split_3(i);

它立即调用它，因为它不是引用。我用以下代码修复了代码

tableData[i].tableImage.indexId = i;
tableData[i].tableImage.onload = split_3;
tableData[i].tableImage.src = "data:image/jpg;base64," + data.image;

我还将当前索引存储在图像对象本身中。这样，当onload被触发时，我可以调用它

function split_3() {
    var i = this.indexId;

---

其余代码可以正常工作，没有任何更改。

谢谢，我更正了粘贴的代码。我最初粘贴的只是我正在测试的东西（未成功）。

imageObject

似乎没有

tableImage

属性。您正在执行

imageData[i].tableImage.onload=split_3（i）。即使
imageObject
有
tableImage
属性，您在哪里设置它的src？@VivekAthalye感谢您花时间。我在复制代码时把事情搞砸了。您的观察是正确的，但我的代码没有这个问题。我已经修好了我的岗位。