Is there a way to tell if had an error before callbacks get attached?

Question

The page begins to load.

<img id="logo" src="/logo.png">

Then we run a bunch of JavaScript and by the time we get to the error handling for the <img> above, it has experienced an error... /logo.png returns 404 or 500 or something.

Now, this JavaScript:

document.getElementById('logo').onerror = () => {
    console.log('logo img did not load');
}

is useless because the onload and onerror callbacks would have already been called.

A solution to see if it loaded successfully would be to check:

document.getElementById('logo').complete

but this shows true even if there was an error, and looking in the JavaScript console and Googling has shown me nothing similar to this for error checking.

Does anyone know of any way to see if there was an error when the <img> tried to load.

I don't want to use the following:

let img = new Image();
img.onerror = () => {
    console.log('logo img did not load');
}
img.src = '/logo.png';

Edit: I am unable to add any JavaScript attributes to the html. That would be handy, and a solution in some situations, but it is not a solution for my situation. So this:

<img id="logo" src="/logo.png" onerror="errorHandler()">

won't work for me.

Answer 1

Firstly, you might find some good answers in this thread here: Check if an image is loaded (no errors) with jQuery (Not all answers are strictly jQuery, but even the ones that are still offer good insight).

Here's a quick answer though. Whenever an image is not loaded properly its naturalWidth and naturalHeight properties will be 0. Based on that knowledge you can create a function that will register an error listener if the image is not yet loaded, or immediately call your listener if it is, i.e. the images complete property is set to true but the naturalHeight or naturalWidth is set to 0.

You should be able to use this function anywhere you intend to add an onerror listener.

const [img1, img2] = document.querySelectorAll("img")

function onImgError(img, fn){
  if (img.complete){
    if(!img.naturalWidth || !img.naturalHeight){
      fn(new Error("Image not loaded"))
    }
  }
  img.addEventListener('error', fn)
}

setTimeout(()=>{
  // these won't fire when image is already loaded
  img1.addEventListener('error', (e) => {
    console.log("img1 error")
  })
  img2.addEventListener('error', (e) => {
    console.log("img2 error") 
  })
  // but this one will
  onImgError(img1, (e)=>{
    console.error(e)
  })
  // this image loads, so no error
  onImgError(img2, (e)=>{
    console.error(e)
  })
}, 1000)

<img src="fdsf"/>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" width="100"/>

Answer 2

Use onerror="" event.

Documentation: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror

myFunction = (image) => {
     // If this calls, it's gone wrong.
     console.log('Error');
     // Access this
     image.src = 'https://example.jpg';
}

<img src="image.gif" onerror="myFunction(this)">

You can also have a placeholder image for any errors, if detected change image without a function.

<img src="image.png" onError="this.onerror=null;this.src='/error.gif';" />

If you aren't using attribute javascript as you said, get all images on pageload. Use .error to grab all errors with JQuery.

$('img')
  .error(function() {
    alert( "Handler for .error() called." )
  })
  .attr( "src", "missing.png" );

Non JQuery

var img = document.querySelector('img')

function loaded() {
  alert('loaded')
}

if (img.complete) {
  loaded()
} else {
  img.addEventListener('load', loaded)
  img.addEventListener('error', function() {
    alert('error')
  })
}

<img src="#">