CSS Image Slowdown - php

Question

I have the following CSS
.jScrollPaneContainer {
position: relative;
overflow: hidden;
z-index: 1;
}
.jScrollPaneTrack {
position: absolute;
right: 50%;
top: 0;
height: 100%;
}
.jScrollPaneDrag {
position: absolute;
overflow: hidden;
}
.jScrollPaneDragTop {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.jScrollPaneDragBottom {
position: absolute;
bottom: 0;
left: 0;
overflow: hidden;
}
.scroll-pane {
width: 100%;
height: 100%;
display:block;
overflow: auto;
}
a.jScrollArrowUp {
display: block;
position: absolute;
z-index: 1;
top: 0;
right: 50%;
text-indent: -2000px;
overflow: hidden;
height: 9px;
}
a.jScrollArrowDown {
display: block;
position: absolute;
z-index: 1;
bottom: 0;
right: 50%;
text-indent: -2000px;
overflow: hidden;
height: 9px;
}
.jScrollPaneTrack {
background: url(/images/track.gif) repeat-y;
}
.jScrollPaneDrag {
background: url(/images/drag_middle.gif) no-repeat 0 50%;
}
.jScrollPaneDragTop {
background: url(/images/drag_top.gif) no-repeat 0 0;
height: 4px;
}
.jScrollPaneDragBottom {
background: url(/images/drag_bottom.gif) no-repeat 0 0;
height: 4px;
}
a.jScrollArrowUp {
height: 11px;
background: url(/images/arrow_up.gif) no-repeat 0 0;
cursor:default;
}
a.jScrollArrowUp:hover {
background-position: 0 -11px;
}
a.jScrollArrowDown {
height: 11px;
background: url(/images/arrow_down.gif) no-repeat 0 0;
cursor:default;
}
a.jScrollArrowDown:hover {
background-position: 0 -11px;
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
background-position: 0 -22px;
}
This is where I load the css stylesheet in my classic asp code which is in the head of the html:
<link href="/css/jScrollPane.css" type="text/css" rel="stylesheet" media="all" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.mousewheel.js"></script>
<script type="text/javascript" src="/scripts/jScrollPane.js"></script>
<script type="text/javascript">
$(function()
{
// this initialises the demo scollpanes on the page.
$('#pane1').jScrollPane({showArrows:true, scrollbarWidth:11, scrollbarMargin:0});
$('#pane2').jScrollPane({showArrows:true, scrollbarWidth:11, scrollbarMargin:0});
$('#pane3').jScrollPane({showArrows:true, scrollbarWidth:11, scrollbarMargin:0});
$('#pane4').jScrollPane({showArrows:true, scrollbarWidth:11, scrollbarMargin:0});
$('#pane5').jScrollPane({showArrows:true, scrollbarWidth:11, scrollbarMargin:0});
$('#pane6').jScrollPane({showArrows:true, scrollbarWidth:11, scrollbarMargin:0});
});
</script>
<script>
Can someone explain to me why it takes about 50 secs to load the drag-*.gifs and the arrow up and down gifs. Im really confused on why it takes so long to load simple images. Could this be a cache issue? Here is an image for the results I got from my webpage.

Answer 1

Multiple HTTP requests can really slow down a web page loading time. Have a look at this CSS sprites tutorial for an idea of how you can get dramatic speed improvements.