How to alert after all images loaded?

I'm building a JavaScript game and I want to alert after all images are loaded. I tried this code but it's not working:

function loadEveryThing() {
  var imgNumber = 0;

  img1 = new Image();
  img1.src = "1.png"
  img1.onload = function() {
    imgNumber = imgNumber + 1;

  img2 = new Image();
  img2.src = "2.png"
  img2.onload = function() {
    imgNumber = imgNumber + 1;

  img3 = new Image();
  img3.src = "3.png"
  img3.onload = function() {
    imgNumber = imgNumber + 1;

  if (imgNumber == 3) alert("done")



The images are loading asynchronously. Your checker code will run before any of the images get loaded. I suggest you do the checks for each image load. Something like:

function loadImages(urls,callback){

  var counter = 0;

  //checking function
  function check(){
    if(urls.length === counter) callback();

  //for each image, attach the handler and load
  for(var i = urls.length; i--;){
    img = new Image();
    img3.onload = check;
    img.src= urls[i]


loadImages([/*array of urls*/],function(){
  //this function fires when all images have loaded

You can do it the following way and read more about this code in my blog post

var imgLoaded = 0;
var imgToLoad = 10;
var onImgLoad = function()
   if(imgLoaded == imgToLoad)
      alert("done");             //Call to our draw function

for(var i = 0; i < 10; i++)
  images[i] = new Image();
  images[i].onload = onImgLoad;
  images[i].src = 'images/'+i+'.png';

I can't post comment as my account "doesn't have enough reputation" but I'd like to point out the reason those solutions above were not working.

images.onload would not be executed in the order as written in the code. Therefore you don't know which image got loaded first.

As the result, imgLoaded == imgToLoad might fail to run. Sometimes it works sometimes it won't.

The same reason other solutions above would fail.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.