Is there code to auto reload images if it doesn't load at first time in users browser ?
-
-
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). -
Why wouldn't it load? o.O
I've nvr had that problem before.Comment
-
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 ?Comment
-
Hey.
You could use the onerror event to try to reload the image.
[code=html]
<img src="some_image .png" onerror="reload Image(this);" />[/code]
[code=javascript]
function reloadImage(pTh is) {
// To prevent this from being executed over and over
pThis.onerror = null;
// Refresh the src attribute, which should make the
// browsers reload the iamge.
pThis.src = pThis.src;
}[/code]
Even tho the event is not a part of any standard, it works in every browser since IE5.5.Comment
-
Thanks Dear Atli
is the second code Javascript ?
could it be dynamically so i don't have to add the line onerror="reload Image(this); in every image path ?Comment
-
Go through every img element.
Code:var images = document.getElementsByTagName('IMG'); for (var i in images) { // perform operations on images[i] }Comment
-
the final code would be like this ?
is it working with images that in CSS background ?Code:var images = document.getElementsByTagName('IMG'); for (var i in images) { onerror="reloadImage(this);" }Comment
-
No, you would have to use the elements of the images array, like kovik's comment said, and add the onerror event on there.
[code=javascript]
images[i].onerror = function() {
this.onerror = null;
this.src = this.src;
}[/code]
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.
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.is it working with images that in CSS background ?Comment
-
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
sorry i didn't get meaning by ( this has to be executed after every <img> )Code:<script type="text/javascript"> var images = document.getElementsByTagName('IMG'); for (var i in images) { images[i].onerror = function() { this.onerror = null; this.src = this.src; } } </script>
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 helpingComment
-
He means right before the </body> closing tag in your code.
Code:<html> <head> ... </head> <body> ... <script> // Your javascript code </script> </body> </html>
Comment
-
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 imagesComment
-
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.Comment
-
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 ?
Code:<script type="text/javascript"> var images = document.getElementsByTagName('IMG'); for (var i in images) { images[i].onerror = function() { this.onerror = null; this.src = this.src; } } </script>Comment
-
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.Comment
Comment