Solved

PHP Page Load Time / "Loading" layer

Posted on 2015-02-05
8
97 Views
Last Modified: 2015-02-27
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
Comment
Question by:erzoolander
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +1
8 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40592537
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
 
LVL 2

Author Comment

by:erzoolander
ID: 40592798
You mean a header(location) deal?
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 40592832
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
How To Install Bash on Windows 10

Windows’ budding partnership with Canonical has certainly led to some great improvements. One of them being the ability to use Bash on your Windows machine without third party applications! This might be one of the greatest things a cloud engineer in a Windows environment can do!

 
LVL 110

Expert Comment

by:Ray Paseur
ID: 40593413
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
 
LVL 19

Expert Comment

by:Albert Van Halen
ID: 40593656
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
 
LVL 2

Author Comment

by:erzoolander
ID: 40594015
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
 
LVL 110

Accepted Solution

by:
Ray Paseur earned 500 total points
ID: 40594908
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
 
LVL 2

Author Closing Comment

by:erzoolander
ID: 40636015
Gracias :)
0

Featured Post

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

626 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question