Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

increase website page load time - lots of images

Posted on 2012-03-13
4
Medium Priority
?
219 Views
Last Modified: 2012-03-20
i have a webpage that has a lot of images.

what is the best way to increase page load speed with all of them.

here is the link:
http://galstanward.com/before-after-photos.html

thanks
0
Comment
Question by:webdott
  • 2
4 Comments
 
LVL 18

Accepted Solution

by:
nap0leon earned 2000 total points
ID: 37715596
Only the first row of images need to be loaded initially (OK, maybe the first two rows for high resolution large screen monitors).
All of the others are "below the fold" and can be loaded later.

A couple minor changes to your page...

1- add jQuery to your HEAD section
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript" ></script>

Open in new window


2- for every image that you want to delay the load:
change imgs like this:
<img alt="" src="before-after-photos_files/28.png" height="312" width="950">
<img alt="" src="before-after-photos_files/4.png" height="312" width="950">

Open in new window


to this:
<img alt="" src="" height="312" width="950" id="28">
<img alt="" src="" height="312" width="950" id="4">

Open in new window


And add the code that makes those IMG tags actually have an image in them.:
<script type="text/javascript" >
	$(document).ready(function(){
		$("#28").attr("src","before-after-photos_files/28.png");
		$("#4").attr("src","before-after-photos_files/4.png");
	})
</script>

Open in new window


The whole page won't load "faster", but if you only make the page load the first row of images "right away" the user will still see the first images right away and by the time they start scrolling, the other images should be loaded.
0
 
LVL 20

Expert Comment

by:Proculopsis
ID: 37715727
0
 

Author Comment

by:webdott
ID: 37716344
thanks.

i am going to try napOlean's response first, then will look at the lazy-loading.
0
 

Author Closing Comment

by:webdott
ID: 37742865
thanks

i have tested this and will be using it on the website.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
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…
Suggested Courses

916 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