Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Member
    Join Date
    Jul 2011
    Posts
    95
    Member #
    28555
    Liked
    1 times
    Hi Guys
    I am posting on behalf of a professional photographer who has made a personal website with over 1000+ images of his new baby on (private password-protected site so not viewable by public).
    He has developing this using Wordpress and a "viewfinder" theme.

    On his homepage, he has over 1000 120px x 120px thumbnails, and there are links to categories i.e. 0-3months, 3-6months, 6-9 months which then breaks down the number of images displayed.

    As you can imagine, it takes a while for the home page to load with all these images, especially on mobiles, I have reduced the number of milliseconds in the themes jquery file to 5ms so it loads quicker now than it did do but still not quick enough.

    What he ahs suggested is to either make a mobile-friendly version of this iste which may some how help it all load quicker, or perhaps add an overlay with a progress bar showing the loading status of the site?

    Could someone give us a bit of advice on how best to approach this?

    Thanks

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Anyone displaying that many records, especially on a mobile device is going to need "pagination"...

    Limit the display to 10-20 records ( images at a time ), give the user the option to change that number, if they have the choice to display 20 at a time and they change to a hundred at a time... The they are gonna expect it to be slow.

    Some people are using a jquery/Ajax module to display their records... Then as the last frame comes into view, the browser automatically calls the next set of records...

    I've not done that myself, but see it quite regularly in apps for sites like monster, truckpaper.com, etc.)

    The mobile version of WDF has a "show more", that does pretty much the same thing by clicking a link.

  4. #3
    Member
    Join Date
    Jul 2011
    Posts
    95
    Member #
    28555
    Liked
    1 times
    Thanks for your reply
    I could suggest pagination to him but I think he likes the fact that all the thumbnails are in front of him, 7 across and about 150 rows down, clicking a thumbnail loads a fancybox with an enlarged image, pagination would mean scrolling through pages to find a particular image etc.

    I will also look in to this jquery/ajax solution, thanks.

  5. #4
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    The ONLY way to speed things up is to decrease the amount being downloaded.

    Even if the thumbnails are just 10k each... I'm sure there's some JavaScript code for each one to interact with the fancybox... Then there's the basic page code... So you just starting out at a meg and a half, which is gonna load slow on a mobile device...And growing with everything else on the page.

    If the CSS and page is done right... The images should be loading... But displaying... And you can start scrolling almost immediately... You should not have to wait for all the images to load before you can see the page... Unless of course... Something is using tables for layout.

  6. #5
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    If it was me I would just used a combination of ajax and jquery to give it a nice smooth transition when the user chooses to see more images.
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs



  7. #6
    Junior Member Alina C.'s Avatar
    Join Date
    Feb 2013
    Posts
    3
    Member #
    35371
    Webzarus is definitely right, Adrian. The best way to get your page loading quicker is to reduce the download amount. The more one has to download, the longer it will take.

    Definitely consider utilizing a dynamic image load, something along the lines of LazyLoad. However, I do believe the original author has ceased updating it. There is a plugin specific to Wordpress, though, named Lazy Load, as well.

  8. #7
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    On his homepage, he has over 1000 120px x 120px thumbnails
    Are these really "thumbnails"?
    Or are there only full-size photos that are forced to small dimensions to appear like thumbnails?
    Find out for us if they are in fact real thumbnails.

    Other photo manipulation methods that might make it slow ...

    1) A PHP script is resizing the full-size photos to thumbs "on the fly" using GD or Imagemagick. That's almost as bad as resizing full-size photos using HTML/CSS.

    2) The photos are stored inside the MySQL database (BLOB), instead of storing them in a directory.

    Let us know exactly what you mean by "thumbnails".



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:45 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com