• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 116
  • Last Modified:

PHP Page Load Time / "Loading" layer

I've got a page I'm developing that queries a number of other service APIs - and it takes a bit of time for the page to grab all the assets.  So - I'd like to put some sort of front-end JQuery-esque (if that's the best solution) loading screen so it's not just dead wait time.

Thing is - the page doesn't load (including javascript) until all the assets are collected via PHP.  So, any sort of interstitial loading animation I set up gets hung up as well as the server doesn't output the page until it's done with it's business.

Any hints on how to get around that?  My first inclination is to load the page first - then load the other assets via some sort of AJAXy type thing - but I'd rather not do that if there's a simpler way to just keep what I already have.

Any help is appreciated!
0
erzoolander
Asked:
erzoolander
  • 3
  • 2
  • 2
  • +1
1 Solution
 
Dave BaldwinFixer of ProblemsCommented:
Split it into two pages.  The first page puts up the animation and calls the second page.  The animation will disappear when the second page finally loads.
0
 
erzoolanderAuthor Commented:
You mean a header(location) deal?
0
 
Dave BaldwinFixer of ProblemsCommented:
Or javascript 'window.location'.  Hmm.  I tired that here http://www.yamiam.org/Spinner.html but the spinner doesn't seem to work.  Don't know why.
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Ray PaseurCommented:
Can you please show us the page so we can see the behavior?  There could be a lot of reasons things are slow.  It may be best to reorganize this into a Single-Page Application (like FB or Twitter).  These sites load page components incrementally as they are needed in the viewport.  There is an "instant-view" that comes up, but the rest of the page gets loaded only as needed.
0
 
Albert Van HalenAnalyst developerCommented:
I did something like this a while ago using a querystring parameter.
I named the parameter 'load' and it must be set to 1 in order to load the content.

When it's not available in the request on the server, I just output a lightweight page showing an animated gif and also a meta refresh tag in the head using the same url including the load parameter.
<meta http-equiv="refresh" content="0;URL=http://...&load=1" />

Open in new window

With this code the browser loads the url specified in the meta tag in 0 seconds.
0
 
erzoolanderAuthor Commented:
The page isn't currently web-accessible - as I'm developing it on a localhost LAMP server.

The part of the page that takes a while to load is a process I have that:

a->Does an oAuth check/login with Dropbox
b->Queries the user's Dropbox files/parses them out by various file types

It's the querying of Dropbox/the returning of the file list that seems to be taking a while...like 10-15 seconds (at least on my account) to query/return list.
0
 
Ray PaseurCommented:
That's to be expected.  OAuth is a little slow, and Dropbox is a lot slow.  There are several designs that you might be able to use to give the appearance of faster work.  

You might cache the data from Dropbox. You could run a CRON job once every few minutes to refresh your cache by pulling the data from Dropbox.  This would let you show a page that provided quick response and also contained a large green button that said, "Refresh the cache with the latest data."  

You could use AngularJS to load the data from Dropbox -- it can show partials as the page renders, but be prepared for a fairly steep learning curve.  This is the design behind Facebook, Twitter and similar Single Page Applications (SPA).  They don't try to load all the data at once - just the part you need in the viewport.

You could output a partial page and use PHP flush() to send the HTML wireframe to the browser.  The appropriate divs would get filled in as a backend PHP script, started by jQuery, did its work, sending the remainder of the data to the browser.  

Or you could just sort of "punt" and use a progress bar like the one shown in this article.  You can fake this data, or you can make it real, and probably your clients will not know or care about the difference, as long as they get a sense that things are working while they are waiting.
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/A_14519-A-jQuery-Progress-Bar.html
0
 
erzoolanderAuthor Commented:
Gracias :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 3
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now