Solved

PHP Page Load Time / "Loading" layer

Posted on 2015-02-05
8
86 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
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

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.

Question has a verified solution.

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

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
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…

713 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