Is there code to auto reload images if it doesn't load at first time in users browser ?
30  10596 
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.
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 ?
Atli 5,058
Expert 4TB
Hey.
You could use the onerror event to try to reload the image. -
<img src="some_image.png" onerror="reloadImage(this);" />
-
function reloadImage(pThis) {
-
// 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;
-
}
Even tho the event is not a part of any standard, it works in every browser since IE5.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 ?
Go through every img element. - var images = document.getElementsByTagName('IMG');
-
for (var i in images) {
-
// perform operations on images[i]
-
}
the final code would be like this ? -
var images = document.getElementsByTagName('IMG');
-
for (var i in images) {
-
onerror="reloadImage(this);"
-
}
-
is it working with images that in CSS background ?
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. -
images[i].onerror = function() {
-
this.onerror = null;
-
this.src = this.src;
-
}
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.
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 -
<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>
-
-
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
He means right before the </body> closing tag in your code. - <html>
-
<head>
-
...
-
</head>
-
<body>
-
...
-
<script>
-
// Your javascript code
-
</script>
-
</body>
-
</html>
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
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.
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 ? -
<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>
-
-
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.
Ok dear , sure i trust your experience and Atli as well
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 ?
Post the source of the page please. That is ALL the HTML.
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 ) -
<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 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: -
<img id="myimg" src="myimg.png" />
-
<script>
-
// This prints "myimg.png"
-
alert(document.getElementById('myimg').src)
-
</script>
-
<script>
-
// This prints nothing, and will likely give you an error.
-
alert(document.getElementById('myimg').src)
-
</script>
-
<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.
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. -
<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 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.
@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?
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 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.
@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?
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 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.
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 ?
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.
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Prometheus Research |
last post by:
http://newyork.craigslist.org/eng/34043771.html
We need a JavaScript component which will auto-submit a form after a
set period has elapsed. The component must display a counter that
dynamically...
|
by: bissatch |
last post by:
Hi,
I have been tryin to run free dhtml code from a web page. The web page
is:
http://dynamicdrive.com/dynamicindex14/pixelate.htm
When I load the page above it opens as normal and the...
|
by: malv |
last post by:
I am involved in a major scientific algorithm design problem in which
simulation of the underlying physics and visualization play an
important role. Algorithm adaptation from run to run often...
|
by: WRH |
last post by:
Hello
I am new to asp but I made some Jscript functions which work
fine. The functions contain some strings used as a registration
key for some apps. It is important that these strings not be...
|
by: laurakr |
last post by:
I am trying to use a clear to get my bottom nav bar below the quote box
on the right, but it isn't working. I would like the bottom edge of the
quote box to "stick" to the footer nav bar but copy...
|
by: Hexman |
last post by:
Hello All,
I'd like your comments on the code below. The sub does exactly what I want it to do but I don't feel that it is solid as all. It seems like I'm
using some VB6 code, .Net2003 code,...
|
by: sinbuzz |
last post by:
People,
Most browsers allow me to suppress viewing of images when I browse a
URL.
Can this behavior be duplicated by the server?
I'd like for my server to detect if a user has image viewing...
|
by: rosaryshop |
last post by:
I'm working a jewelry/rosary design web site at http://www.rosaryshop.com/rosariesAndKits2.php.
As the user makes selections, it updates images of various parts, giving them a preview of the...
|
by: reemamg |
last post by:
I've two frames in a page. On the left Frame i've buttons , if we click on button the particular pages will be loaded in the middle Frame.
This code works perfectly in Firefox but not in IE ... ...
|
by: Kemmylinns12 |
last post by:
Blockchain technology has emerged as a transformative force in the business world, offering unprecedented opportunities for innovation and efficiency. While initially associated with cryptocurrencies...
|
by: Naresh1 |
last post by:
What is WebLogic Admin Training?
WebLogic Admin Training is a specialized program designed to equip individuals with the skills and knowledge required to effectively administer and manage Oracle...
|
by: antdb |
last post by:
Ⅰ. Advantage of AntDB: hyper-convergence + streaming processing engine
In the overall architecture, a new "hyper-convergence" concept was proposed, which integrated multiple engines and...
|
by: WisdomUfot |
last post by:
It's an interesting question you've got about how Gmail hides the HTTP referrer when a link in an email is clicked. While I don't have the specific technical details, Gmail likely implements measures...
|
by: Oralloy |
last post by:
Hello Folks,
I am trying to hook up a CPU which I designed using SystemC to I/O pins on an FPGA.
My problem (spelled failure) is with the synthesis of my design into a bitstream, not the C++...
|
by: BLUEPANDA |
last post by:
At BluePanda Dev, we're passionate about building high-quality software and sharing our knowledge with the community. That's why we've created a SaaS starter kit that's not only easy to use but also...
|
by: Rahul1995seven |
last post by:
Introduction:
In the realm of programming languages, Python has emerged as a powerhouse. With its simplicity, versatility, and robustness, Python has gained popularity among beginners and experts...
|
by: Ricardo de Mila |
last post by:
Dear people, good afternoon...
I have a form in msAccess with lots of controls and a specific routine must be triggered if the mouse_down event happens in any control.
Than I need to discover what...
|
by: Johno34 |
last post by:
I have this click event on my form. It speaks to a Datasheet Subform
Private Sub Command260_Click()
Dim r As DAO.Recordset
Set r = Form_frmABCD.Form.RecordsetClone
r.MoveFirst
Do
If...
| |
