background-image fails to load when remote server is down
NOTE: After posting I realized that, although this is part of an AJAX-heavy distributed web app, the issue itself is not an AJAX issue. Apologies for misplacing it. Please respond it you can offer any guidance.
Site loads links to pages that exist on various remote servers.
Every remote-page-link is represented by an icon on the site, and the relevant icon is provided by the remote server at runtime. Consequently, if the remote server's webmaster wishes to replace the icon then the new icon will show up henceforth.
The site presents all dynamically-loaded icons in span elements, as background images, and offers active images on hover via CSS:hover pseudo-class, and remote page access is handled by a click event.
When a server is down a blank space is evident, and I want to remove it from the display.
Programmatically I might iterate through the span objects and search for the ones that are missing the images, but the problem that I have is that the references to the remote images are in the tag, only they fail to load (i.e., background-image: url("xxx/xxx.com/xxxx.png") is still in the tag, so searching for its absence will not work. I need to know if it is actually being painted on the user's screen).
Any thoughts? Is there an best-practice or standard for dynamically setting missing images to "display: none;" without pinging each server with every page load to see if it is active?