Get items that didn't load
How to find out all the elements that did not load because the resource was not 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 someone give me a hint on how to recognize these elements? I think setting onerror for each element is not a solution, because elements can be loaded dynamically ..
Unfortunately, window.onerror not triggered by "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 helps to understand my question.
Although this is theoretically possible with the error event and bubbles (the error event should bubble), unfortunately, browser support for it is weak (at least)
In the best case, you can scroll through the DOM at a specific point in time and look for all src attributes and check if they point to real resources (according to the methods suggested by others). But it will not catch anything that has been removed.
Sources:
http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents
You can use the JavaScript onerror method to verify that:
<img src="false.jpg" onerror="alert('Failed to load');" /> But if you load images dynamically, you can use functions like file_exists () .
function ImageExist(url) { var img = new Image(); img.src = url; return img.height != 0; } I found this from cichy on user: How to check if a file exists in jQuery or JavaScript?
using this function, simply do the following: if it does not exist (onload), add the image name to the array. There you will have all the information
EDIT:
If you want to find all the images on the page, try the PHP Simple HTML DOM Parser. You need to download here first. Example (created by posting NAVEEDs in How do you parse and process HTML / XML in PHP? ):
<?php $html = file_get_html('filename.php'); $image_names = array(); //store all image_names in here foreach($html->find('img') as $element){ $image_names[] = $element->src; } function check_images($array){ foreach($array as $img){ if(@getimagesize($img)) echo "true"; else echo "false: ".$img; } } check_images($image_names); If I worked perfectly for me!