Solved

increase website page load time - lots of images

Posted on 2012-03-13
4
216 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

617 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