Get elements that did not load

Question

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.

possible duplicate of [Check if an image is loaded (no errors) in JavaScript](http://stackoverflow.com/questions/1977871/check-if-an-image-is-loaded-no-errors-in-javascript) — Dave, Aug 09 '13 at 21:12
What do you mean "dynamically", either you load them or you don't, if they fail they will trigger the onerror event, no other way to magically figure out if it failed to load ? — adeneo, Aug 09 '13 at 21:12
@adeneo or an other script loads them ;) like _google adsense_ which is loading a huge number of resources; i even don't know which resources were tried to load.. — user2514117, Aug 09 '13 at 22:08
@Dave the difference: i even don't know which resources were tried to load, because they might be loaded by other scripts etc.. But yeah, I have read this post before; but i cant use it in my case. — user2514117, Aug 09 '13 at 22:18
At a minimum, you need to put your error-catching code first. Before you actually try to load anything. Unless you go with the instant-in-time option, in which case it needs to be last, and after the document is fully loaded. — Dave, Aug 09 '13 at 22:38

score 1 · Answer 1 · answered Aug 09 '13 at 21:26

1

You can use the JavaScript method onerror to check that:

<img src="false.jpg" onerror="alert('Failed to load');" />

But if you're loading images dynamically, you can use functions like file_exists().

answered Aug 09 '13 at 21:26

faino

3,194
15
17

the problem: if i use something like _google adsense_, a script which is loading a variety of images and other scritps; i cant hook in to find out if there may be resources the were not found... – user2514117 Aug 09 '13 at 21:59

score 1 · Accepted Answer · answered Aug 09 '13 at 22:33

1

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

http://www.quirksmode.org/dom/events/error.html

answered Aug 09 '13 at 22:33

Dave

44,275
12
65
105

Also I should note the cross-domain issue. Anything which is loaded in an iframe from another domain won't be accessible to you. It's a security restriction. – Dave Aug 09 '13 at 22:36
Thats right, but the DOM can change everytime bescause of scripts that are working with delays or similar. So i need to loop through the whole DOM multiple times... I was afraid of something like that. – user2514117 Aug 09 '13 at 22:42
OK, well, just to double-check: you know that most browsers' developer tools can tell you this stuff anyway? It's just that it's not possible via JavaScript. I'm assuming you want this for public stuff, but thought I'd mention just in case! – Dave Aug 09 '13 at 22:46
:D the browser's console shows each and every resource-loading error. And yes, i want javascript to do so. – user2514117 Aug 09 '13 at 22:51

score 0 · Answer 3 · edited May 23 '17 at 10:31

0

function ImageExist(url) 
{
   var img = new Image();
   img.src = url;
   return img.height != 0;
}

i found this from user cichy on : How do I check if file exists in jQuery or JavaScript?

with this function simply do this: if it dosen't exist (onload) add the image name into an array. There, you will have all information

EDIT:

If you want to find all images on page try PHP Simple HTML DOM Parser. You'll have to download it Here first. An example (created with help of NAVEEDs post on 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 worked perfectly for me!

edited May 23 '17 at 10:31

Community

1
1

answered Aug 09 '13 at 21:24

sdfgee

81
3

like commented to faino, it is hard to even find out which urls had been requested :( – user2514117 Aug 09 '13 at 22:02
I updated my answer. New way can also handle images from elsewhere. – sdfgee Aug 10 '13 at 00:22
This can only parse the elements that are initial included in 'filename.php', but not those that are created via js. But its a very cool idea ;) – user2514117 Aug 10 '13 at 09:25
actually you can combine all pages: $html = file_get_html('filename.php').file_get_html('otherpage.html'); You can use an array again. This should work.. :) – sdfgee Aug 10 '13 at 11:46

Get elements that did not load

3 Answers3