CODEWITHSUNDEEP
javascriptjqueryimage
user2989137
user2989137

Reputation: 1

Javascript "Image load" fires multiple times

I have a webpage loaded in an Iframe which uses javascript to calculate the height of the webpage document (the document may have images). Right now I wrote the following code to calculate the height after the image loaded:

$("#campaignContainer img").bind("load", function() {
                console.log("image load call");
                callPostSize(this.src);             
            })
            .each(function() {           
              if(this.complete) {
                  console.log("Before image load call from complete");
                 /*this.onload= function(){console.log("image load call");
                                          callPostSize(this.src);
                                          };*/
                  $(this).load();
                  console.log("call load from image complete");
              }

I noticed that the image load is fired multiple times in case of one image; if the images are not cached it fires 2 times else it fires 3 times.

My question is 1) why image load is triggered multiple times? Is it a jquery issue or some browser events? 2) Is there a way to stop this?

I tried jquery.one but without success: it does not give the exact height (only the last trigger gives the exact height).

Upvotes: 0

Views: 1770

Answers (2)

user2989137
user2989137

Reputation: 1

Found the issue. The image load was invoked explicitly again from some other part of code which was not evident.

Upvotes: 0

ricky
ricky

Reputation: 1674

you are using 'img' tag as a selector. So it will fire for all the images present inside the 'campaignContainer' .

Upvotes: 0

Related Questions