使用Javascript檢測圖像加載取消

Question

我當前正在使用setTimeout和onLoad依次加載多個圖像的頁面上工作。 基本上，當圖像完成加載時，會觸發onLoad ，它會通過setTimeout調用開始另一個圖像加載。 不幸的是，如果由於某種原因（例如隨后的ajax調用）而中斷了圖像加載，則永遠不會調用onload，也不會加載任何要加載的圖像。 javascript中有什么方法可以檢測到這種情況？ 我試圖掛接到onError和onAbort （在圖像標簽上），但似乎都沒有被調用。

  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

AJAX調用不應取消圖像的加載。 這里可能還有其他事情發生...

我認為您無法輕易檢測到圖像的加載失敗。 如果超時計時器在從映像獲取加載事件之前過期，則可以觸發具有特定超時閾值的計時器以將映像視為失敗。

Answer 2

您可以調用onload和onerror

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

埃里克