How to find out all elements that did not load because the resource wasn't found?
<body>
<img src="notThere.png">
<script src="notInHere.png"></script>
<img src="DoesExist.png">
// want to find the first and the script with unexisting sources, but not the second image with an existing source.
</body>
Can somebody give me a hint how to find out those elements?
I think, setting onerror for each element is no solution because the elements may be loaded dynamically..
Unfortunately, window.onerror is not fired on 'resource not found' errors.
Example:
<body>
<script src="someonesScript.js"></script> <!-- this script might load images/audio etc.. -->
<script>
// now put here whatever you like
// but find out which resources (images,scripts,..) were tried to load (from the script above)
// and can't be loaded
</script>
</body>
Hope this example will help to understand my question.
While this is theoretically possible with the error event and bubbling (the error event should bubble), sadly browser support for it is weak (to say the least)
At best, you could loop through the DOM at a particular instant and look for all src attributes, and check if they point to valid resources (by the methods which others have suggested). But that won't catch anything which has been removed.
Sources:
http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents