CODEWITHSUNDEEP
javascriptjqueryhtmlimageload
user1871516
user1871516

Reputation: 1009

Jquery load event for 2 img element

Now I encounter a problem for 2 image. There are two image a png (upper level image) and a jpg image (lower level image) and the size are the same, so if I overlap the two image , it look as if one image.

The problem is I have to set up a load event on both image :

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

You can notice that if I use $('#largeText,#largeImg').load(function () , it will trigger the event either one of the image is loaded? How to set the load event triggers only when both images is loaded? thanks.

Upvotes: 1

Views: 74

Answers (1)

Musa
Musa

Reputation: 97717

You can have a counter in the load function and when it reaches 2 execute your code.

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

Upvotes: 1

Related Questions