Illum et quibusdam enim proin occaecat pulvinar mi! Cum incidunt esse quis.

Home / Javascript

Image Load Error

In image.tmpl we set the onerror handler to add the class load-error if the image fails to load. This replaces the unreliable use of an event handler in site.js due to the timing on when images would fail. In vanilla.css we have a rule that hides failed images if they also have the class hide-on-error. This commonly happens with events and directories for some reason where ARCOS seems to think there is an image when in fact there isn't.

Below is a broken image in a div with a red border, and then a second identical image with that class in a div with a green border.

There is also a class, hide-parent-on-error, which will result in the immediate parent element of the image (usually a div or p tag) to be hidden. If the image does not have an immediate parent, however, this might end up hiding a good chunk of the page, so be careful. Alternatively, if the parent is, say, an anchor tag, then this class might hide less than you wanted.

Below is a broken image in a div with a red border, and then a second identical image with that class in a div with a green border.