CODEWITHSUNDEEP
phpcssperformanceimage
Novazero
Novazero

Reputation: 553

CSS Image Slowdown

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.

enter image description here

enter image description here

Upvotes: 1

Views: 464

Answers (1)

Kalessin
Kalessin

Reputation: 2292

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.

Upvotes: 1

Related Questions