Handling 404 errors on new Asset.image in _preload

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Give Slideshow2 a url to an image that doesn't exist

What is the expected output? What do you see instead?

I would like Slideshow2 to recover gracefully but instead it halts.

What version of the product are you using? On what operating system and
browser?

Slideshow 1.3.1 OS X Safari 5

Please provide any additional information below.

I am using slideshow to retrieve images not hosted on my webserver (via RSS 
from SmugMug). Occasionally the remote server returns a 404 error code for an 
image (why, is a different issue, possibly MooTools-related, as I can always 
retrieve the same image url via the browser and wget).

JS console output : "Failed to load resource: the server responded with a 
status of 404 (Not Found)"

I would like Slideshow2 to gracefully handle the error and keep going, instead 
it halts. I apologize for butchering your code, but here is what I modified - 
what do you think of my solution?

1. I added an onerror event to Asset.image:

  if (!this.preloader) {
    this.preloader = new Asset.image(src, {
      'onload': function(){
        this.store('loaded', true);
      },
      'onerror': function(){
        this.store('loaded', true);
        this.store('error', true);
      }});
  }

2. I check for the new flag when styles are set

  if(!this.preloader.retrieve('error')) {
    this.image.set('styles', {'display': 'block', 'height': 'auto', 'visibility': 'hidden', 'width': 'auto', 'zIndex': this.counter});
  } else {
    this.image.set('styles', {'display': 'none', 'height': 'auto', 'visibility': 'hidden', 'width': 'auto', 'zIndex': this.counter});
  }         

Original issue reported on code.google.com by jason%he...@gtempaccount.com on 16 Apr 2011 at 5:56

[GoogleCodeExporter]

whoops! not quite robust enough. i'll try again:

1. A new var

  var error = false;

2. I added an onerror event to Asset.image:

  if (!this.preloader) {
    this.preloader = new Asset.image(src, {
      'onload': function(){
        this.store('loaded', true);
      },
      'onerror': function(){
        this.store('loaded', true);
        this.store('error', true);
      }});
  }

3. I cache the error flag

  if (this.preloader){
    this.cache[src] = {
      'height': this.preloader.get('height'),
      'src': src,
      'width': this.preloader.get('width'),
      'error': this.preloader.get('error')
    }
  }

4. I check for the new flag when styles are set

  if(!this.cache[error]) {
    this.image.set('styles', {'display': 'block', 'height': 'auto', 'visibility': 'hidden', 'width': 'auto', 'zIndex': this.counter});
  } else {
    this.image.set('styles', {'display': 'none', 'height': 'auto', 'visibility': 'hidden', 'width': 'auto', 'zIndex': this.counter});
  }         

Original comment by jason%he...@gtempaccount.com on 16 Apr 2011 at 6:09

[GoogleCodeExporter]

Original comment by aeron.gl...@gmail.com on 17 Apr 2011 at 2:55

• Changed state: Accepted

[GoogleCodeExporter]

Do you think the slide should be removed from the show? In your example it 
looks like Slideshow behaves as if the image is there, it just doesn't show 
anything. So navigating back and forth will continue to show the broken slide? 
The other option would be to remove the slide from the show.. or perhaps an 
option for a default broken image... Also how should thumbnails behave?

Original comment by aeron.gl...@gmail.com on 17 Apr 2011 at 7:10

[GoogleCodeExporter]

Complicated isn't it!

If you watch slideshow number 2 at this url:
http://www.jasonhendriks.com/programmer/blip-slideshow/blip-slideshow-examples/

You'll notice that every now and then the slide doesn't change, but a new 
caption appears. The console shows a 404 error. This is the behaviour I'm 
talking about.

My personal preference would be to just show a blank slide for those that are 
missing, or the "default image" if it is available. removing the slide might 
mean they all disappear after a while ;-) and removing thumbs sounds 
undesirable from a usability perspective.

Original comment by jason%he...@gtempaccount.com on 17 Apr 2011 at 8:19

[GoogleCodeExporter]

(incidentally i'm not seeing any 404 errors at all NOW, but i did last night 
and that's the exception case i'm trying to handle)

Original comment by jason%he...@gtempaccount.com on 17 Apr 2011 at 8:25

[GoogleCodeExporter]

Original comment by aeron.gl...@gmail.com on 9 May 2011 at 2:05

• Changed state: Started

[GoogleCodeExporter]

Original comment by aeron.gl...@gmail.com on 13 May 2011 at 4:19

• Added labels: Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

Will be up on github and in the new build later today.

Original comment by aeron.gl...@gmail.com on 9 Jul 2011 at 6:26

• Changed state: Fixed