Solved

PHP Page Load Time / "Loading" layer

Posted on 2015-02-05
8
78 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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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 1

Author Comment

by:erzoolander
Comment Utility
You mean a header(location) deal?
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
 
LVL 108

Expert Comment

by:Ray Paseur
Comment Utility
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 19

Expert Comment

by:Albert Van Halen
Comment Utility
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 1

Author Comment

by:erzoolander
Comment Utility
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 108

Accepted Solution

by:
Ray Paseur earned 500 total points
Comment Utility
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 1

Author Closing Comment

by:erzoolander
Comment Utility
Gracias :)
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

728 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now