2

I have a website that links to different images on other websites. Sometimes these images have been removed or the domains are no longer live, etc. To not show these images and remove them instead I'm using jQuery to do this:

 // catch image load errors
$( "img" ).error(function() { 

 // read out image source:
 var src = $(this).attr('src');

// post the source to the server for the image to be removed    
 $.post("/pajax/image/notLoaded/", {url:src},
    function success(obj) {

       if(obj.status =='ok'){
            console.log('removed: '+src);
        }

      },
   "json" );

 // hide the image & its container div
    $( this ).hide();
    $( this ).closest(".item-img").hide();

This works fine for images that are no longer live and no data is been sent. However, often enough an HTML page is sent instead in which case jQuery doesn't throw the error, but the console shows "Resource interpreted as Image but transferred with MIME type text/html:"

Is there a way to catch this with jQuery?

Rid Iculous
  • 3,696
  • 3
  • 23
  • 28

2 Answers2

2

Your question is very similar to this one:

jQuery/JavaScript to replace broken images

Rather than using jQuery and trying to attach an event, I've found it most reliable to write the <img...> element this way:

<img src="image.png" onerror="this.style.display='none';"/>
Community
  • 1
  • 1
Jeremy J Starcher
  • 23,369
  • 6
  • 54
  • 74
0

I don't know how jQuery assigns onerror, but I'm successfully getting / handling an error when the MIME type doesn't match.

JSFiddle example.

If you still can't get it to work, my next suggestion is to send an AJAX request and attempt to retrieve the MIME type. I'm pretty sure it won't work if you are hotlinking, though.

You could do something like:

var url = document.getElementsByTagName('img')[0].src
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.send(null);

console.log(xhr.getAllResponseHeaders());
//or
console.log(xhr.getResponseHeader("content-type"));