Detect Image Load Cancelation in Javascript

Question

I'm currently working on a page that loads several images sequentially using setTimeout and onLoad. Basically when an image finishes loading, onLoad is triggered, which starts another image loading via a setTimeout call. Unfortunately, if an image load is interrupted for some reason, such as a subsequent ajax call, onload is never called and any images left to be loaded are not loaded. Is there any way in javascript to detect this situation? I've attempted to hook into onError and onAbort (on the image tag) and neither of these seem to be called.

  queuePhotos: function(options)
{
  this.init();
  this.photo_urls = options.photo_urls;
  this.photo_size = options.size
  this.max_width = options['max_width'];
  this.max_height = options['max_height'];
  this.containers = options['containers'];
  yd = YAHOO.util.Dom;
  photo_tags = yd.getElementsByClassName('image_stub', 'div');
  for( i in photo_tags )
  {
    //create new image
    photo = new Image();
    this.queue.push( { tag: photo_tags[i], photo: photo } ); 
  }
  setTimeout(photoLoader.prepareNextPhoto, 1);
},

prepareNextPhoto: function()
{
  photo_tag_and_image = photoLoader.queue.shift();
  if(photo_tag_and_image)
  {
    YAHOO.util.Event.addListener(photo_tag_and_image.photo, "load", photoLoader.appendPhoto, photo_tag_and_image, photoLoader);
    photo_tag_and_image.photo.src = photoLoader.photo_urls[photo_tag_and_image.tag.id];
  }
},

Answer 1

An AJAX call shouldn't cancel the loading of images. There could be something else going on here...

I don't think that you can readily detect the load failure of an image. You could fire off a timer with a certain timeout threshold to deem an image as failed if your timeout timer expires before you get the load event from the image.

Answer 2

You can call onload and onerror

myImage.onload = function(){ alert("loaded"); };
myImage.onerror = function(){ alert("whoops"); };

Eric