Question

继续：

Javascript wait for image to load before calling Ajax

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引用处理程序所针对的元素，而无需再次选择它。

Jquery无法定位图像

2 个答案: