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"); };

埃里克

在Javascript中检测图像加载取消

2 个答案: