dflow Posted August 13, 2009 Share Posted August 13, 2009 i would like to display an image only after the page has fully loaded with all scripts etc this script shows the "Page is Loaded" although the status progress bar is still loading <html> <head> <script type="text/javascript"> function load() { window.status="Page is loaded"; } </script> </head> <body onload="load()"> </body> </html> Quote Link to comment Share on other sites More sharing options...
FD_F Posted August 13, 2009 Share Posted August 13, 2009 try : function load() { window.onload= alert('Now Page Loaded'); } Quote Link to comment Share on other sites More sharing options...
dflow Posted August 13, 2009 Author Share Posted August 13, 2009 it gives 2 alert boxes, one pops up too early and is this correct? <img src="" onload="load()"> Quote Link to comment Share on other sites More sharing options...
haku Posted August 13, 2009 Share Posted August 13, 2009 <script type="text/javascript"> window.onload=function() { alert("page is loaded"); } </script> Quote Link to comment Share on other sites More sharing options...
dflow Posted August 13, 2009 Author Share Posted August 13, 2009 <script type="text/javascript"> window.onload=function() { alert("page is loaded"); } </script> thanks now how do i set the image to show after the window.onload? Quote Link to comment Share on other sites More sharing options...
haku Posted August 13, 2009 Share Posted August 13, 2009 How have you hidden it in the first place? Do the opposite to it. Quote Link to comment Share on other sites More sharing options...
dflow Posted August 13, 2009 Author Share Posted August 13, 2009 How have you hidden it in the first place? Do the opposite to it. the image triggers a javascript that is positioned after the </body> tag due to some issues i had with IE so if the page isnt fully loaded then the link to the script doesnt trigger the rel="" in this script: <?php $filename = $pieces[1]; // piece2] if (file_exists($filename)) {?> <a href="largeimages<?php echo $row_RsPDetails['ProductImage_1']; ?>" rel="lightbox[<?php echo $row_RsPDetails['ProductID']; ?>]"><img src="../images/press_for_largepic.gif" )" alt="press here for larger pictures" width="200" height="122" border="0"></a> <?php } ?> Quote Link to comment Share on other sites More sharing options...
haku Posted August 13, 2009 Share Posted August 13, 2009 So to get this right, you don't want to show the image after page load, you want to load the image after page load. In that case, you are going to need to use Ajax, which is beyond the scope of what can be explained in this thread. Although, truth be told it sounds like whatever you are trying to do, it probably can be done a lot better. My first hint is that your script tag should never be anywhere after the closing body tag. Quote Link to comment Share on other sites More sharing options...
dflow Posted August 13, 2009 Author Share Posted August 13, 2009 So to get this right, you don't want to show the image after page load, you want to load the image after page load. In that case, you are going to need to use Ajax, which is beyond the scope of what can be explained in this thread. Although, truth be told it sounds like whatever you are trying to do, it probably can be done a lot better. My first hint is that your script tag should never be anywhere after the closing body tag. this image triggers the jquery lightbox script with an image gallery the first script checks to see if there is the equivalent large image to the smaller image then it triggers the rel for the lightbox, i had serious problems with this on IE so i made this compromise with the scripts loading after the body tags but now the main issue is that the rel isnt trigger until the page fully loads and customers will only see the first image and not the lightbox image gallery. what ajax should i use? Quote Link to comment Share on other sites More sharing options...
dmcdivitt Posted August 13, 2009 Share Posted August 13, 2009 I found the onload events do not always work. I suggest putting a small piece of javascript at the very bottom of the page, just before the closing body tag. In that javascript start a timer, and the timer of course can execute a function anywhere else in the page. Placing javascript at the very end of the page works better than onload events in my experience, but you should only do a few instructions in that manner. When the timer fires you can unhide the image. What you might also do is put the image inside another element and give the other element width and height, the same as the image should have when loaded. That will keep the image from reflowing the page after it has rendered. The image should finish loading pursuant to the original event thread. If the timer fires before the entire image is downloaded, the image will simply continue to download and fill in. Quote Link to comment Share on other sites More sharing options...
haku Posted August 13, 2009 Share Posted August 13, 2009 Why don't you trigger the lightbox script with your onload function? Quote Link to comment Share on other sites More sharing options...
dflow Posted August 13, 2009 Author Share Posted August 13, 2009 Why don't you trigger the lightbox script with your onload function? as dmcdivitt said i had issues with the onload function as well, IE through operation aborted alerts at me, so i let that angle go and sadly as most of my users use IE i have to compromise Quote Link to comment Share on other sites More sharing options...
haku Posted August 13, 2009 Share Posted August 13, 2009 Fair enough - I cater to IE users myself. But, if your onload wasn't working right, then there was something else wrong. Why don't you show us the code you were trying. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.