iPhone safari authentication required when setting image (401)

Question

I am trying to set the src of and image tag like this:

var $img = $('img');
$img.error(function(){
        $(this).attr('src', 'missingperson.gif');
    })
.attr('src', urlToMyPhoto);

Since I have no rights to get this image it should go to the .error function. This is what happens in Chrome (desktop and Android). On Safari on iPhone I get a pop-up with authentication required. So the problem here is:

• I don't want the user to see this pop-up. I want them to see the missingperson.gif image.
• When I press login in the pop-up it does show the missingperson.gif image. But when I got more images like this I only get one pop-up. So when I press on login I only get one missingperson image.

Answer 1

You can't suppress the popup. The only possibility I'm aware of, is to make an AJAX-request to the image and check for a 4XX-Status and then loading the images.

I'm not 100% sure that this works, but all in all, you can't suppress the popup in Safari, as far as I know.