PHP load content gradually

Hello,

Not sure how to explain what I am trying to do, but here I go:

I have a photo album that has 50+ pages to it and over 300 photos.  It appears the whole thing is trying to load all at the same time.  What I would like to happen is say a visitor chooses to look at page 2 I want page 1, 2 and 3 to load and if they go to page 10 only page 9, 10 and 11 load at that time.

Does this make any sense?

Please advise.

Have a great day,

Don
GEMCCAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
No, that does not make sense.  I would never try to load even 3 pages at a time.  Where are you going to load them to?  Browsers don't store up pages that they haven't been to.

Give us a link to the site so we can see what's going on.
0
Ray PaseurCommented:
50+ pages and 300 photos is a good candidate for Flickr.  But in any case, this is not really a PHP question.  You might want to look into using the browser cache.  You can send the image once, then send 304 Not Modified headers.  If the client cached the images, they will not need another copy. You might find some good solutions if you look into Single Page Applications that can be built with AngularJS.
0
GEMCCAuthor Commented:
Hello,

Please go to www.adiadant.com/photos.php.  Open the book then click on one of the photos.  I know you were thinking 3 separate PHP files and I apologize that is not what I meant.  I mean is three of the slides which is on one large file.

Thanks for your help.

Have a great day,

Don
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Ray PaseurCommented:
0
Ray PaseurCommented:
Cute kids!
0
Ray PaseurCommented:
OK, I'm still not exactly understanding what we're trying to do.  Let me see if I can paraphrase, using a number line.
1 2 3 4 5

Open in new window

If I choose number 1 or number 2, I would see this:
1 2 3

Open in new window

If I choose number 3, I would see this:
2 3 4

Open in new window

If I choose either 4 or 5, I would see this:
3 4 5

Open in new window

Is this getting anywhere near the concept?
0
GEMCCAuthor Commented:
Hi Ray,

First thanks for the heads up about the validator!  I usually do it after I get things working, but WOW!  355 errors!

Anyway, yes you are getting the concept.  I do not know if you see the issue, the page is trying to load ALL of the photos which is making navigating slow at least at first.

Please advise.

Have a great day,

Don
0
Ray PaseurCommented:
OK, I think we may be onto something.  Animations are really good ways of distracting the client while a site loads inherently slow things, like large images.  But there's something else I would pursue first.  The images seem to be stored in PNG format which is much larger than anything needed for the WWW.  Some of the background information is in this article:
http://www.experts-exchange.com/Software/Photos_Graphics/Images_and_Photos/A_5931-Putting-Your-Photos-Online.html

These are two links to the same image, stored in different file types.
http://iconoun.com/demo/images/saved_as_png.png -- this one is over 600KB
http://iconoun.com/demo/images/saved_as_jpg.jpg -- this one is under 100KB

My recommendation would be to use Photoshop or equivalent to store the images in jpg format at the IPTC standard compression quality, which IIRC is 75%.  Since these are relatively small (in pixel dimensions) you may be able to work with even greater compression levels and still have acceptable image quality on the screen.  I would try that first, then revisit the web site.  You're going to greatly reduce the bandwidth and storage requirements and you may find that it's acceptably fast with image compression alone.

A couple of other notes... PNG has its own compression that is non-lossy, but it's also not very efficient.  JPG compression is lossy - meaning that too much compression or reapplied compression can degrade the image quality.  I would never recommend JPG compression for images that are going to print.  But on the screen, image compression is much more forgiving to the eye and can be a big help in reducing the "weight" of image intensive sites like this one.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
GEMCCAuthor Commented:
Hi Ray,

The main reason if not the only reason I am using PNG is for the transparent background capability other wise I would have to create a different version of each photo based on the background color.

You mentioned the animation thing and I ma not sure how to incorporate it.

Your thoughts?

Have a great day,

Don
0
Ray PaseurCommented:
... a different version of each photo based on the background color
I'm not understanding that.  Image galleries have been around since the dawn of the internet and nobody has to match background colors.  Can you give me an example of an image that would only work as a PNG and not work as a JPG?  There may be some magic we can do with that.

With regard to animations, a spinning symbol or an hourglass that turns over and over is a normal design pattern.  Almost anything that says, "I'm working on your request" is a useful distraction.
0
GEMCCAuthor Commented:
The photos that apear "portrait" are using a transparent background so I do not have to have ones with white background and another with purple.

What is the best way to incorporate the animation?  I would like to create one using one of Adia's photos.

Have a great day,

Don
0
Ray PaseurCommented:
Sorry - I'm not really very good with JavaScript and CSS.  I know the principle but not the praxis.  You might want to consider posting the question in those Zones for help with the animation.  You might want to ask about jQuery photo galleries, too.  I've seen galleries that use popup windows exactly sized to the photo inside, so there is no need for consideration of background colors.  When I was active in photography I used jAlbum and got really good results.

Best of luck with the project, ~Ray
0
GEMCCAuthor Commented:
Created JPG versions of the images.
0
GEMCCAuthor Commented:
Issue resolved.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.