CodingPrioritize loading sequence..?

  

Press Ctrl+Enter to quickly submit your post
Quick Reply  
 
 
  
 From:  steve   18 Feb 2009 00:00 
 To:  ALL 1 of 9 
35784.1 
Am making a website. It is for a lady who likes kaleidoscopes. The background of the page is a image generated by PHP, it throws random shapes in and makes a kaliedascopeopee.

On my test server here (dedicated, but very slow) it takes seven seconds to draw. On the remote server we'll be using it takes 1, maybe 2, seconds. Better. But for some reason, and I've only tested this in Firefox but that's enough to annoy me, it won't begin loading other images on the page until the background has loaded.

I recall something that allows you priotiziizie the loading of images. Is that possible? So I can have the background first.

If not, I'll go down the facebook route and the current page can preload the background for the next pages, but ideally I'd just say "hello browser, please load this last".

That or maybe, on OnLoad (or OnComplete or whatever it is) document.write a CSS definition for the background! Messy but possibly better. Hmm. I could possibily make it so it can revert to the slow-way for non-JS browsers too.

Any ideas? I may have solved my own problems by saying them aloud :C
0/0
 Reply   Quote More 

 From:  Peter (BOUGHTONP)   18 Feb 2009 00:06 
 To:  steve      2 of 9 
35784.2 In reply to 35784.1 
Take the background out.

Then download jQuery and do something like this:

code:
$j(document).ready( addBackground );
 
function addBackground()
{
$j(document).css('background','path/to/image.php');
}



That's my quick and simple thought... doesn't cater for non JS users, but it's only a background image so that's not critical?
0/0
 Reply   Quote More 

 From:  steve   18 Feb 2009 00:09 
 To:  Peter (BOUGHTONP)      3 of 9 
35784.3 In reply to 35784.2 
I can write that in straight javascript pretty easily, jQuery seems a bit.. too much hassel?

Am thinking that when the page first writes, JS will remove the background. That way, non-JS supporting browsers will display it normally. Once the document has loaded, JS can put it back in. Yay.

I do need to get into jQuery. There always seems to be an easier way to do things though :D
0/0
 Reply   Quote More 

 From:  Peter (BOUGHTONP)   18 Feb 2009 00:18 
 To:  steve      4 of 9 
35784.4 In reply to 35784.3 
jQuery is the easier way.

Me, Google, Rendle, Mozilla, Microsoft, and thousands of others that aren't as important as these five all use and recommend it.


Anyhow... another thought - either for non-JS users only, or perhaps in general - have a pre-generated background.
Have a cron job that runs every X minutes to refresh it from the PHP script.

Perhaps you could even queue up several pre-generated images if you wanted to make it change for every page load.

This then allows you to sidestep the delayed loading altogether.
0/0
 Reply   Quote More 

 From:  steve   18 Feb 2009 00:19 
 To:  Peter (BOUGHTONP)      5 of 9 
35784.5 In reply to 35784.4 
I shall look at it :D Next job coming up is confusing and complicated and for a very fussy client, those are the best times to learn new things!
0/0
 Reply   Quote More 

 From:  THERE IS NO GOD BUT (RENDLE)   18 Feb 2009 12:17 
 To:  Peter (BOUGHTONP)      6 of 9 
35784.6 In reply to 35784.4 
Has to be said, if Peter and I agree on something then it's either very good or I'm uncharacteristically wrong.
0/0
 Reply   Quote More 

 From:  99% of gargoyles look like (MR_BASTARD)   18 Feb 2009 17:35 
 To:  steve      7 of 9 
35784.7 In reply to 35784.1 
I glazed over the jQuery stuff, so this might be answered, but rather than document.write a CSS definition, you can call a function to set the CSS style onLoad. Something like (but possibly different if this doesn't work):

javascript code:
function setBkgdImg()
{
document.body.style.backgroundImage = '/path/image.jpg';
}
some things never change
0/0
 Reply   Quote More 

 From:  Matt   18 Feb 2009 19:50 
 To:  steve      8 of 9 
35784.8 In reply to 35784.1 
(I haven't tested this, but it should work I think.)

If you don't want to use Javascript at all you may also be able to use the so-called sub-domain persistent connection trick.

Basically what you need to do is create separate sub-domains for each type of content, i.e. images.domain.com for static images and dynamic.domain.com for the kaleidoscope image script and keep www.domain.com for serving up the HTML and CSS.

Doing this will trick most (if not all) browsers into loading the content in parallel instead of queuing up the requests in accordance to it's max-connections-per-domain setting that most browsers have built in. If it works it means the kaleidoscope image shouldn't block the requests to load the other images.

doohicky
0/0
 Reply   Quote More 

 From:  steve   18 Feb 2009 21:25 
 To:  Matt      9 of 9 
35784.9 In reply to 35784.8 
Ooh, that sounds like a nice tidy way to do things. Thank you sexpot.
0/0
 Reply   Quote More 

Reply to All    
 

1–9

Rate my interest:

Adjust text size : Smaller 10 Larger

Beehive Forum 1.5.2 |  FAQ |  Docs |  Support |  Donate! ©2002 - 2024 Project Beehive Forum

Forum Stats