I have reached the point where I have enough images in my web site's skin that the page loading, no matter how fast, subtracts from any "good looks" it might have.
I would like to find a way to delay the page from displaying for a couple seconds while the page loads. So that it can all be shown at once. I have looked into several methods of preloading images with javascript, but I'd like to avoid having any text floating around on the page without any logical order to it until the images load. So if anyone knows a script to preload a page, that would be great!
Let me be clear about a few things:
- I have no intention of catering to slower connection speeds, 99% of my visitors are going to be gamers.
- I have no intention of supporting 800px wide resolutions.
- I do actually plan to switch to a centered page layout in the future (margin left/right: auto).
I think the php is better solution then javascript. If I good remember the php function is ob_flush.
Sonam
Could you explain a little more? I have never heard of ob_flush() exerting a behavior that lets the browser show a page after everything has been loaded. It is my understanding that ob_flush() and its relatives were for the purpose of delaying the output from the php script (server side), and not delaying the display of output in the browser. (but i could be wrong.)
It is just a though so I haven't tested it yet.
Also, because I'am not clear how your page was design.
This might be wrony anyway.
Will the CSS display and visiblility property helps ?
When page was loaded completed.
Display it by changing its css property.
Please tell me whether it works or not.
Thanks in advance.
| blueray wrote: |
It is just a though so I haven't tested it yet.
Also, because I'am not clear how your page was design.
This might be wrony anyway.
Will the CSS display and visiblility property helps ?
When page was loaded completed.
Display it by changing its css property.
Please tell me whether it works or not.
Thanks in advance. |
You know I had actually heard about using the display property to possibly preload stuff. I'm just not sure it would work. For one thing how would you go about changing the property?I googled for "dynamic css" and found this:
http://revnode.com/oss/css/
I didn't look further at the mototools class or at the css.js class, so I don't know how easy they are to use. It looks like this has some really good ideas, but may not be fully developed. If you want to learn new javascript programming techniques and don't mind reading the code to understand it, this may be a good way to go. You can just write some Javascript that sets the CSS property "display: none;" on the body element of your page. Then, you can check every few milliseconds if everything is loaded (maybe by checking the last image on the page) and if so, reset the body element to its original state.
Stubru, you should be able to do that with the onload() event without a timing loop, although I remember hearing at least one browser didn't always activate that at the right time. I'm not sure if onload() occurs only after all elements are loaded though.
| SonLight wrote: |
| Stubru, you should be able to do that with the onload() event without a timing loop, although I remember hearing at least one browser didn't always activate that at the right time. I'm not sure if onload() occurs only after all elements are loaded though. |
Oh cool! I thought onload fired after all HTML was loaded, I didn't know it also waited for images. | Stubru Freak wrote: |
| I thought onload fired after all HTML was loaded, I didn't know it also waited for images. |
I was not aware of this either...? I suppose I can give it a try though.
So basicaly set body to Display: None;. Wait a second or two, and then remove the class with js? | Aredon wrote: |
| Stubru Freak wrote: | | I thought onload fired after all HTML was loaded, I didn't know it also waited for images. |
I was not aware of this either...? I suppose I can give it a try though.
So basicaly set body to Display: None;. Wait a second or two, and then remove the class with js? |
Yes, I think that should work. If it doesn't, set
| Code: |
body * {
display: none;
} |
But I think it should work. Instead of waiting two seconds, I would also set it so it appears when fully loaded. | Stubru Freak wrote: |
| Aredon wrote: | | Stubru Freak wrote: | | I thought onload fired after all HTML was loaded, I didn't know it also waited for images. |
I was not aware of this either...? I suppose I can give it a try though.
So basicaly set body to Display: None;. Wait a second or two, and then remove the class with js? |
Yes, I think that should work. If it doesn't, set
| Code: | body * {
display: none;
} |
But I think it should work. Instead of waiting two seconds, I would also set it so it appears when fully loaded. |
Just curious, but how would I check to make sure that the page was fully loaded before displaying it? I'm not really clear on that.Using the document.onload event.
hmm I think document.onload actually triggers once the javascript is loaded rather than once the entire page is ready, but honestly I could be wrong. 
I'm not that great with javascript yet, and I was going to ask if anyone could perhaps create a working example? That would help me a lot in implementing this.
