suppress image loading errors in safari

Question

I am trying to show an image if a call to http://localhost:someportnumber/icon returns a zero size 200 response.

in most browsers, the following (cut down) works: jQuery.$('#myImage').load(function() { jQuery.$(this).show(); });

if the image doesnt load, the img element is never shown, and its all good.

however, safari decides to report these failed image loads as page errors: http://img.skitch.com/20090706-kna755s8fbb1pbd3mf9di9hdkg.jpg

as much as i have tried, i havent found a good way of getting around these errors. any pointers in the right direction would be much appreciated.

Answer 1

1. This may help you!

Answer 2

The older version of Safari is broken and the image.onload doesn't working properly.

So, to deal with it, I have used something where the images are loaded by script, then tested if they are there.

Simplified, something along the lines of:

// load the images
var img = new Image();
img.src = "http://whatever/image.jpg";
imageList.push(img);

: : :

// check
pollSafariImages();


// we have a poller to handle Safari as the onerror does not
// return 'this' to the image objects, so we don't know which
// one it was referring to
function pollSafariImages()
{
  var loadedCount = 0;

  var index;
  for (index=0; index<imageList.length; index++)
  {
    if (imageList[index].bLoaded == true)
    {
      loadedCount++;
    }
    else if (imageList[index].complete == true)
    {
      imageList[index].bLoaded = true;
    }
  }
  if (loadedCount < imageList.length)
  {
    setTimeout('pollImages()', 250);
  }
}

After a duration we check which images aren't loaded and replace them in our gui.

I hope the safari-hack is at least useful :)

Answer 3

Have you tried inserting an if function to check that the image exists, and then only loading if it does?

You could also put something in the

<img src="blah" onerror="function to remove image if it doesn't load">