is there code to auto reload images if it doesn't loaded first time in users browser?

**fuchsia555** · Dec 20 '09, 09:08 PM

Ok dear , sure i trust your experience and Atli as well

**fuchsia555** · Dec 20 '09, 09:59 PM

i have tried the code but it doesn't work , i was browsing the website and some of images doesn't loaded or reloaded , maybe something wrong with the code ?

**Markus** · Dec 20 '09, 10:26 PM

Post the source of the page please. That is ALL the HTML.

**fuchsia555** · Dec 20 '09, 10:46 PM

Thanks for reply Mr Markus
i have inserted the javascript between body tags , Atli was referring to something but i didn't get the meaning and maybe it doesn't work because of it , ( And note that this has to be executed after every <img> element you want it to work on )

Code:

<html>
<head>
...
</head>
<body>
<script>
 
var images = document.getElementsByTagName('IMG');
for (var i in images) {
 
images[i].onerror = function() {
    this.onerror = null;
    this.src = this.src;
}
 
}
</script>

</body>
</html>

**Atli** · Dec 21 '09, 09:59 AM

Atli was referring to something but i didn't get the meaning and maybe it doesn't work because of it , ( And note that this has to be executed after every <img> element you want it to work on )

What I mean by this is; in order for the JavaScript code to be able to use your <img> tags, the tags must be written before the JavaScript code in your HTML markup.

Consider these two examples:
[code=html]
<img id="myimg" src="myimg.png" />
<script>
// This prints "myimg.png"
alert(document. getElementById( 'myimg').src)
</script>[/code]
[code=html]
<script>
// This prints nothing, and will likely give you an error.
alert(document. getElementById( 'myimg').src)
</script>
<img id="myimg" src="myimg.png" />[/code]
See what I mean? In the second snippet, when the JavaScript code tries to fetch the <img> element, it can't because it doesn't exist yet.

This is why I suggested that you put your JavaScript code right before the closing </body> element, because at that point every <img> tag would definitely be created already.

And this is also the reason why you can't put the code in the <head>, because it gets executed before the <body>, so at that point no part of the body, including the images, have been created yet.

is there any example for how DOM event works? may it would help in css background images

Like I said earlier, I'm not sure those will help reload CSS images (although I haven't really tried it yet).

If you want to learn about DOM events, start with the Wikipedia entry, and maybe try a Google search.

There is plenty of info available on this available out there, only a Google search away, so there is really no point repeating it here.

**Markus** · Dec 21 '09, 11:25 AM

Originally posted by fuchsia555

Thanks for reply Mr Markus
i have inserted the javascript between body tags , Atli was referring to something but i didn't get the meaning and maybe it doesn't work because of it , ( And note that this has to be executed after every <img> element you want it to work on )

Code:

<html>
<head>
...
</head>
<body>
<script>
 
var images = document.getElementsByTagName('IMG');
for (var i in images) {
 
images[i].onerror = function() {
    this.onerror = null;
    this.src = this.src;
}
 
}
</script>

</body>
</html>

There are no <img> elements in that HTML.

**Markus** · Dec 21 '09, 11:28 AM

Instead of sticking JS in arbitrary locations in the HTML, stick it in the <head> element (or better yet, stick it in it's own .js file - cache!) and use the onload action.

Code:

<html ...>
   <head>
       <script type="text/javascript">
            window.onload = function() {
                /* Any JS here will be executed when the DOM (HTML tree) is available */
            }
        </script>
    </head>
    <body></body>
</html>

**Atli** · Dec 21 '09, 11:46 AM

Originally posted by Markus

Instead of sticking JS in arbitrary locations in the HTML, stick it in the <head> element (or better yet, stick it in it's own .js file - cache!) and use the onload action.

Normally I would agree with that, but in this case that won't work.

The window.onload event isn't fired until after everything on the page has loaded, including the images. So both the onload and onerror events will already have fired for all the images before the window.onload event. It'll be to late to try to use them.

Using jQuery's $(document).rea dy() function (or something equivalent) might work tho.

**Markus** · Dec 21 '09, 04:06 PM

Originally posted by Atli

Normally I would agree with that, but in this case that won't work.

The window.onload event isn't fired until after everything on the page has loaded, including the images. So both the onload and onerror events will already have fired for all the images before the window.onload event. It'll be to late to try to use them.

Using jQuery's $(document).rea dy() function (or something equivalent) might work tho.

Huh? If you have the JS after the images within the HTML, then wouldn't the JS be loaded after the onerror, onload events are fired?

**fuchsia555** · Dec 21 '09, 04:32 PM

Instead of sticking JS in arbitrary locations in the HTML, stick it in the <head> element (or better yet, stick it in it's own .js file - cache!) and use the onload action.

Huh? If you have the JS after the images within the HTML, then wouldn't the JS be loaded after the onerror, onload events are fired?

I'm little confused , which way i better use to make it work please ?

**Atli** · Dec 21 '09, 05:18 PM

Huh? If you have the JS after the images within the HTML, then wouldn't the JS be loaded after the onerror, onload events are fired?

Those events are only fired (on images) once the image load attempt is complete, so if you can execute your JavaScript before that happens then you can manipulate the handlers for those events.

And it appears that all browsers since IE5 execute "inline" JavaScript immediately upon finding it, or at least before the images are loaded, so by adding JavaScript to manipulate the events inside the HTML body, you can mess with the event handlers.

**Markus** · Dec 21 '09, 06:50 PM

Originally posted by Atli

Those events are only fired (on images) once the image load attempt is complete, so if you can execute your JavaScript before that happens then you can manipulate the handlers for those events.

I get that, but in your own words, once the javascript that is post-<img> in placement is loaded, the <img>'s onerror and onload events will have already been fired, or will there be enough delay that the javascript is executed in time to catch these?

**kovik** · Dec 21 '09, 06:57 PM

In that case, the OP should give up on doing this dynamically via JavaScript and do it dynamically via PHP. This *is* the PHP forum, is it not? :P

Use preg_replace() to find all <img> elements and add the onerror event to them.

**Atli** · Dec 22 '09, 10:59 AM

Originally posted by Markus

I get that, but in your own words, once the javascript that is post-<img> in placement is loaded, the <img>'s onerror and onload events will have already been fired, or will there be enough delay that the javascript is executed in time to catch these?

No, I never said that. I just said that the window.onload event is executed to late. JavaScript code that is put into the <body> seems to be executed before the images are loaded, or at least before the requests for them finish.

It might be because the browsers don't request the images until the DOM is ready, or that the request for them is simply slower than the HTML parser, but in all my tests (on a localhost), JavaScript inside the <body> always got executed before the <img> load and error events.

**fuchsia555** · Dec 22 '09, 05:31 PM

Hi
it's nice conversations

Use preg_replace() to find all <img> elements and add the onerror event to them.

Mr kovik , how can it be done by php ?

and kindly can you Guys suggest for me the best webhosting in your opinions ?

is there code to auto reload images if it doesn't loaded first time in users browser?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment