javascript - 2 个 img 元素的 Jquery 加载事件

Question

现在我遇到了 2 个图像的问题。有两个图像，一个 png(上层图像)和一个 jpg 图像(下层图像)，并且大小相同，所以如果我将两个图像重叠，它看起来就像一个图像。

问题是我必须在两个图像上设置加载事件:

        $('#largeText,#largeImg').hide("slide", {
            direction: "right"
        }, 1000, function () {
            $('#largeImg').attr('src', newImagePath);
            $('#largeText').attr('src', newTextPath);
            $('#largeText,#largeImg').load(function () {
                $('#loadingIcon').hide();
                $('#largeText,#largeImg').delay(300).show("slide", {
                    direction: "left"
                }, 1000, function () {
                    $('#largeText,#largeImg').unbind('load');
                });
            });
        });

你可以注意到，如果我使用 $('#largeText,#largeImg').load(function () ，它会触发事件任一图像已加载？如何设置仅当加载两个图像时才触发加载事件？谢谢。

Answer 1

您可以在加载函数中设置一个计数器，当它达到 2 时执行您的代码。

var count = 0;
$('#largeText,#largeImg').load(function () {
  count++;
  if (count == 2){
    $('#loadingIcon').hide();
    $('#largeText,#largeImg').delay(300).show("slide", {
        direction: "left"
    }, 1000, function () {
        $('#largeText,#largeImg').unbind('load');
    });
  }
});