Solved

increase website page load time - lots of images

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

896 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now