HTML5,Javascript canvas tag image.onload() issue

Question

    function LoadResources(){   
      alert("In load socket");

    var canvas   = document.getElementById("myCanvas");
    var context  = canvas.getContext("2d");
    var tiles= new Array();

    var loadedCount=0;
    for (x = 101; x <= 155; x++) {
      var imageObj = new Image(); // new instance for each image
      imageObj.src = "Resources/ClassicCardImages/deck1/dood_deck/"+x+".GIF";

      imageObj.onload=function(){
        loadedCount++;
        if(loadedCount==55){
            cardsImagesLoaded();
        }else {
          alert(loadedCount);
        }
      };
      tiles.push(imageObj);

     }
  };

So when i call the function LoadResources() it does give the alert "in load socket" but does not gives the alert while in imageObj.onload function.

You can use window.onload function i.e "window.onload = function() {..}" and my function in it while use in the body of html document.

Plus i m running it on Google chrome .Is there the problem with chrome's onload or something .

Endre Simo · Accepted Answer · 2012-08-02 07:05:34Z

1

You are trying to increase the loading counter even if the onload function are called only once (at the moment when the images has been loaded completely), so there is no way to trigger the alert many times. For me it's not quite obvious what are you trying to do. Anyway if you want to load multiple images with onload function the best practice is to use a closure, otherwise on each iteration it may happens that at the end of the loop you will get only the last image loaded. I'm not going into detail into what a closure is, but the principle is something like this:

for (var i = 0; i< 4; i++) {
    var imgObj = new Image();
    imgObj.onload = (function(img) {

        return function () {
            ctx.drawImage(imgObj, 0, 0);
        }
    })(i);

    imgObj.src = 'image.png';
}

This way by calling a new function you will create a new execution context retaining the value of i on each iteration.

answered Aug 2, 2012 at 7:05

Endre Simo

11.6k3 gold badges44 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MrCoder Over a year ago

when i use window.onload() it does show images instead of function name and run it offline that is don't run from localhost:8080 but just run it browser from src path.Btw i m using sockcet.io(node.js) does this have to do anything with canvas onload method?

Vinyl Windows · Accepted Answer · 2012-08-02 02:37:30Z

0

I am just adding a little help for your code.

For assigning functions the way you're doing it , it is cheaper to do it the way below.

 for (x = 101; x <= 155; x++) {
      var imageObj = new Image(); // new instance for each image
      imageObj.src = "Resources/ClassicCardImages/deck1/dood_deck/"+x+".GIF";

      imageObj.onload= imageOnLoad;
     }
function imageOnLoad(){
        loadedCount++;
        if(loadedCount==55){
            cardsImagesLoaded();
        }else {
          alert(loadedCount);
        }
      };
      tiles.push(imageObj);
}

answered Aug 2, 2012 at 2:37

Vinyl Windows

5031 gold badge7 silver badges19 bronze badges

1 Comment

MrCoder Over a year ago

Thanks for the help but do you know what's wrong with code or what is the alternative to solve the problem of image.onload...Any sorta help will help

Collectives™ on Stack Overflow

HTML5,Javascript canvas tag image.onload() issue

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related