Solved

increase website page load time - lots of images

Posted on 2012-03-13
4
214 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 500 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

821 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