• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 106
  • Last Modified:

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
0
GEMCC
Asked:
GEMCC
  • 7
  • 6
2 Solutions
 
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy 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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 7
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now