CSSイメージ減速

Question

私は、次の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; 
} 

を持っている私は、HTMLの頭の中で私の従来のASPコードでCSSスタイルシートをロードする場所です：

<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> 

誰かが説明することができますなぜドラッグ - * .gifsと矢印の上下GIFをロードするのに約50秒かかります。私は本当に単純な画像を読み込むのに時間がかかります。これはキャッシュの問題でしょうか？ここに私のウェブページから得た結果のイメージがあります。

Answer 1

複数のHTTPリクエストは、実際のWebページの読み込み時間を遅くすることができます。 this CSS sprites tutorialを見て、どのようにスピードを飛躍的に向上させるかを考えてください。