Solved

PHP Page Load Time / "Loading" layer

Posted on 2015-02-05
8
91 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
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

Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

751 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