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');
    });
  }
});