denno020 Posted March 14, 2011 Share Posted March 14, 2011 One of the pages on my football clubs website is going to have lots of player images on it. It's the players page, and it basically shows the photo's of all players (150x113 ~30KB jpg's), along with their number and player sponsor. I want all of the photos to appear on the page, I don't want to separate it up using pagination.. So is there anything else I could do to minimize the load time of the page? Each image is loaded itself, so there will be a lot of HTTP requests, but I don't think sprites will work in this situation.. Very keen to hear any ideas. Cheers Denno Quote Link to comment Share on other sites More sharing options...
donnan Posted March 14, 2011 Share Posted March 14, 2011 Hi Denno, How many photos on a page are you talking about? If they are .jpg's have you optimized each photo to make them as small is kb as possible? Quote Link to comment Share on other sites More sharing options...
denno020 Posted March 14, 2011 Author Share Posted March 14, 2011 Well we're talking about the whole senior squad, so roughly 30-35 images? Could be upwards of 40+ though.. So I'm stuck with just having to optimize the crap out of each of the images? Thats ok, was hoping there might be a trick to have them load last or something or rather.. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 15, 2011 Share Posted March 15, 2011 well if no one in the team changes a sprite would be a nice solution, 40 header request or 1 makes a huge difference. What you could also do is on the main page, you load all images and set them to display:none; you might try to use javascript to load them after the page is ready. That way the images are in the browser cache and will load instant when on the team page. Quote Link to comment Share on other sites More sharing options...
denno020 Posted March 15, 2011 Author Share Posted March 15, 2011 Yeah I was thinking a sprite.. but that would obviously take a little bit of work to stitch all the photo's together and then appropriately move them into position for each person.. Loading the pictures on the frony page sounds interesting.. I could just load like the first 15-20, so part of the page that is in view will display straight away. And then depending on how fast someone starts scrolling down, they'll see the other photo's waiting to load or not.. So for that I will need to search Google for how to load images into cache using javascript? Thanks Denno Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 15, 2011 Share Posted March 15, 2011 I recommend not to show 40 images on your index.php. So what i said was include in your index.php a script that loads the images after everything is loaded but don't display them (that way they experience it all as smooth). Ones the person visits the team page all images are in it's cache. and yeha as far as the solution, loads have been written on this, a nice way could be jquery: http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript Quote Link to comment Share on other sites More sharing options...
denno020 Posted March 15, 2011 Author Share Posted March 15, 2011 No no I wasn't interpreting that as displaying the images on the front page.. I knew what you meant about loading them into the cache, but not actually displaying them when loaded. I would therefore make them the very last thing to load on the index page right? As they're not going to be displayed anyway.. Cheers Denno Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 15, 2011 Share Posted March 15, 2011 yep I thought just make sure we are on the same level. document.ready(); is the function for jquery i think, but i am not an expert with that. Quote Link to comment Share on other sites More sharing options...
denno020 Posted March 15, 2011 Author Share Posted March 15, 2011 Thanks mate. Much appreciated. I have already had a look at that site you provided and it looks like a winner, so will have a go at implementing it . Cheers Denno Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 15, 2011 Share Posted March 15, 2011 nice, i use jquery here and than, It's the only javascript library i use really Quote Link to comment Share on other sites More sharing options...
crmamx Posted March 18, 2011 Share Posted March 18, 2011 I wish you guys would quit adding things to my list that I need to do... I have the same situation twice with images to load. In the first it is 32 images of members where I load thumbnails with img src and there is 0 lag on load time. In the second I have about 100 airplane images, not thumbnails, and I did have to break it down because of load time. Since I don't know what pagination is, I just link from one page to another. But I will look into what ya'll are talking about when I get some other "stuff" fixed. Quote Link to comment Share on other sites More sharing options...
bspace Posted March 20, 2011 Share Posted March 20, 2011 another thing you can do is to use multiple subdomains there's a limit to how many "streams" a browser can use at once from any one domain serving images from more than one domain/subdomain increases the number of synchronous "streams" Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 20, 2011 Share Posted March 20, 2011 another thing you can do is to use multiple subdomains there's a limit to how many "streams" a browser can use at once from any one domain serving images from more than one domain/subdomain increases the number of synchronous "streams" isn't that 2 requests per domain? so that would make it 20 subdomains Quote Link to comment Share on other sites More sharing options...
ignace Posted March 20, 2011 Share Posted March 20, 2011 Use Image Lazy Loading: http://engineering.slideshare.net/2011/03/faster-page-loads-with-image-lazy-loading/ Quote Link to comment Share on other sites More sharing options...
ignace Posted March 20, 2011 Share Posted March 20, 2011 another thing you can do is to use multiple subdomains there's a limit to how many "streams" a browser can use at once from any one domain serving images from more than one domain/subdomain increases the number of synchronous "streams" If you are on a shared host or host with a "low" number of concurrent connections you'll find users unable to visit your website due to no available connections. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 20, 2011 Share Posted March 20, 2011 Use Image Lazy Loading: http://engineering.slideshare.net/2011/03/faster-page-loads-with-image-lazy-loading/ oei oei oei! that is awesome! thanks for sharing ignace! Quote Link to comment Share on other sites More sharing options...
ignace Posted March 20, 2011 Share Posted March 20, 2011 Yeah I was thinking a sprite.. but that would obviously take a little bit of work to stitch all the photo's together and then appropriately move them into position for each person.. Just imagine what happens when player's leave, new ones are recruited. You would be constantly updating the sprite. Quote Link to comment Share on other sites More sharing options...
denno020 Posted March 20, 2011 Author Share Posted March 20, 2011 Thankyou very kindly . I will definitely implement this once I've got some spare time from uni work . Denno Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.