Jquery 定位图像时遇到问题

Question

继续：

Javascript 在调用 Ajax 之前等待图像加载< /a>

function initResources() {

    var newImage;
    for (i = 0; i < resourceData.length; i++) {

        // Create the image
        newImage = $('<img alt="Big" id="imgA' + i + '" class="mediaImg" width="' + Math.round(resourceData[i][2] * currentScale) + '" height="' + Math.round(resourceData[i][3] * currentScale) + '" />');

        newImage.load(function() {

            alert(i);

            // Position
            $('#imgA' + i).position().top(Math.round(resourceData[i][5] * currentScale));
            $('#imgA' + i).position().left(Math.round(resourceData[i][4] * currentScale));

        });
        newImage[0].src = uploadFolder + '/' + imgData[resourceData[i][1]][1];
        $('#thePage').append(newImage);
    }
}

我有一组图像。当页面最初从服务器加载时，此函数循环遍历所有图像并将它们放置在页面上。

当页面比例发生变化时也会调用此函数。缩放功能会清除 HTML 并使用缩放倍数重新绘制所有内容。

这个函数的问题是它总是提醒resourceData.length，这是循环的结尾。我需要以某种方式将数据传递给加载函数，以便当图像最终加载时，它引用正确的 ID/i。

Answer 1

您有一个在所有回调之间共享的 i 变量。

由于回调是异步执行的，因此当 i 为 length 时，它们都会在循环结束后执行。

您需要将循环体放入一个单独的函数中，该函数将 i 作为参数。
这样，每个 load 回调将使用一个单独的 i 变量（函数参数），该变量永远不会改变。

Answer 2

您可以使用 $.each() 循环来创建您需要闭包（该索引是它自己的变量，而不是共享的）...以及 .position() 调用也需要一些更改，您应该使用 .css() 这里接受一个对象，如下所示：

function initResources() {
    var newImage;
    $.each(resourceData, function(i, data) {
       newImage = $('<img alt="Big" id="imgA' + i + '" class="mediaImg" width="' + Math.round(data[2] * currentScale) + '" height="' + Math.round(data[3] * currentScale) + '" />');
       newImage.load(function() {
            $(this).css({ top: Math.round(data[5] * currentScale), 
                         left: Math.round(data[4] * currentScale) });
       });
       newImage[0].src = uploadFolder + '/' + imgData[data[1]][1];
       $('#thePage').append(newImage);
    });
}

您可以进一步缩短它，但它不会更有效。保留在我的 .load() 事件处理程序中可以使用 this 引用处理程序所在的元素，无需再次选择它。