469,290 Members | 1,930 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,290 developers. It's quick & easy.

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

Is there code to auto reload images if it doesn't load at first time in users browser ?
Dec 18 '09 #1
30 9327
Dormilich
8,651 Expert Mod 8TB
this is nothing you can do from PHP, because PHP finished long before the page in the browser. an image not loading is either an invalid image URL or a connection timeout (to the image file) (or something I donít know).
Dec 18 '09 #2
kovik
1,044 Expert 1GB
Why wouldn't it load? o.O
I've nvr had that problem before.
Dec 19 '09 #3
hi Thanks for reply
as dormilich said maybe not loaded because connection timeout or apache server capacity that cause 503 error , but it all solves if the user refresh it , but i need a code to ( auto refresh the website if user got 503 apache error ) ( and auto reload the image if i didn't loaded in user's browser )
is there something like that ?
Dec 19 '09 #4
Atli
5,058 Expert 4TB
Hey.

You could use the onerror event to try to reload the image.
Expand|Select|Wrap|Line Numbers
  1. <img src="some_image.png" onerror="reloadImage(this);" />
Expand|Select|Wrap|Line Numbers
  1. function reloadImage(pThis) {
  2.     // To prevent this from being executed over and over
  3.     pThis.onerror = null; 
  4.  
  5.     // Refresh the src attribute, which should make the
  6.     // browsers reload the iamge.
  7.     pThis.src = pThis.src;
  8. }
Even tho the event is not a part of any standard, it works in every browser since IE5.5.
Dec 20 '09 #5
Thanks Dear Atli
is the second code Javascript ?
could it be dynamically so i don't have to add the line onerror="reloadImage(this); in every image path ?
Dec 20 '09 #6
kovik
1,044 Expert 1GB
Go through every img element.

Expand|Select|Wrap|Line Numbers
  1. var images = document.getElementsByTagName('IMG');
  2. for (var i in images) {
  3.   // perform operations on images[i]
  4. }
Dec 20 '09 #7
the final code would be like this ?

Expand|Select|Wrap|Line Numbers
  1. var images = document.getElementsByTagName('IMG');
  2. for (var i in images) {
  3.   onerror="reloadImage(this);"
  4. }
  5.  
is it working with images that in CSS background ?
Dec 20 '09 #8
Atli
5,058 Expert 4TB
No, you would have to use the elements of the images array, like kovik's comment said, and add the onerror event on there.
Expand|Select|Wrap|Line Numbers
  1. images[i].onerror = function() {
  2.     this.onerror = null;
  3.     this.src = this.src;
  4. }
And note that this has to be executed after every <img> element you want it to work on, but before the window.onload event. Putting it just before the closing </body> tag would probably be best.

is it working with images that in CSS background ?
No. This only works on <img> tags. Not sure if the DOM events can be used in the same manner for CSS images. It would at least have to be a lot more selective than just going through all the <img> elements.
Dec 20 '09 #9
Thanks Dear , but i think i'm little confused , i wish you have Largeness to correct if something wrong

is this the correct code to add to javascript in header
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  
  3. var images = document.getElementsByTagName('IMG');
  4. for (var i in images) {
  5.  
  6. images[i].onerror = function() {
  7.     this.onerror = null;
  8.     this.src = this.src;
  9. }
  10.  
  11. }
  12. </script>
  13.  
  14.  
sorry i didn't get meaning by ( this has to be executed after every <img> )
so i must add something in <img ... > tag ?

which code i should put before </body> , if is this javascript code so i must put it in header to work ?

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

i'm sorry maybe it's easy for others but i'm still learning and in beginning level , i appreciate helping
Dec 20 '09 #10
kovik
1,044 Expert 1GB
He means right before the </body> closing tag in your code.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. ...
  4. </head>
  5. <body>
  6. ...
  7. <script>
  8. // Your javascript code
  9. </script>
  10. </body>
  11. </html>
Dec 20 '09 #11
could make any difference if i put the code in header instead ?
and is the final code above correct ?

sorry i didn't get meaning by ( this has to be executed after every <img> )
so i must add something in <img ... > tag ?

is there any example for how DOM event works ? may it would help in css background images
Dec 20 '09 #12
kovik
1,044 Expert 1GB
Because in order for JavaScript to find the <img> tags, the <img> elements must be created first. So, if you try to run this code before the <img> elements are created in the HTML, then they may not be accessed.
Dec 20 '09 #13
i thought that the browser reading the page from the <head> first then read <body>
before i use the code kindly can you tell me this complete code is correct or there's something wrong ?
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  
  3. var images = document.getElementsByTagName('IMG');
  4. for (var i in images) {
  5.  
  6. images[i].onerror = function() {
  7.     this.onerror = null;
  8.     this.src = this.src;
  9. }
  10.  
  11. }
  12. </script>
  13.  
  14.  
Dec 20 '09 #14
kovik
1,044 Expert 1GB
At any point did we give you the impression that the code that WE wrote has any problems? Test it for yourself and do some work before asking another question.
Dec 20 '09 #15
Ok dear , sure i trust your experience and Atli as well
Dec 20 '09 #16
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 ?
Dec 20 '09 #17
Markus
6,050 Expert 4TB
Post the source of the page please. That is ALL the HTML.
Dec 20 '09 #18
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 )
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. ...
  4. </head>
  5. <body>
  6. <script>
  7.  
  8. var images = document.getElementsByTagName('IMG');
  9. for (var i in images) {
  10.  
  11. images[i].onerror = function() {
  12.     this.onerror = null;
  13.     this.src = this.src;
  14. }
  15.  
  16. }
  17. </script>
  18.  
  19. </body>
  20. </html>
  21.  
Dec 20 '09 #19
Atli
5,058 Expert 4TB
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:
Expand|Select|Wrap|Line Numbers
  1. <img id="myimg" src="myimg.png" />
  2. <script>
  3.     // This prints "myimg.png"
  4.     alert(document.getElementById('myimg').src)
  5. </script>
Expand|Select|Wrap|Line Numbers
  1. <script>
  2.     // This prints nothing, and will likely give you an error.
  3.     alert(document.getElementById('myimg').src)
  4. </script>
  5. <img id="myimg" src="myimg.png" />
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.
Dec 21 '09 #20
Markus
6,050 Expert 4TB
@fuchsia555
There are no <img> elements in that HTML.
Dec 21 '09 #21
Markus
6,050 Expert 4TB
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.

Expand|Select|Wrap|Line Numbers
  1. <html ...>
  2.    <head>
  3.        <script type="text/javascript">
  4.             window.onload = function() {
  5.                 /* Any JS here will be executed when the DOM (HTML tree) is available */
  6.             }
  7.         </script>
  8.     </head>
  9.     <body></body>
  10. </html>
  11.  
Dec 21 '09 #22
Atli
5,058 Expert 4TB
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).ready() function (or something equivalent) might work tho.
Dec 21 '09 #23
Markus
6,050 Expert 4TB
@Atli
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?
Dec 21 '09 #24
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 ?
Dec 21 '09 #25
Atli
5,058 Expert 4TB
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.
Dec 21 '09 #26
Markus
6,050 Expert 4TB
@Atli
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?
Dec 21 '09 #27
kovik
1,044 Expert 1GB
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.
Dec 21 '09 #28
Atli
5,058 Expert 4TB
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.
Dec 22 '09 #29
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 ?
Dec 22 '09 #30
kovik
1,044 Expert 1GB
Using regular expressions (regex). Look them up on Google and download The Regex Coach in order to make it easier for you to learn regex.
Dec 22 '09 #31

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

8 posts views Thread by Prometheus Research | last post: by
10 posts views Thread by malv | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.