CSS Image Slowdown

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

这是我在我的经典asp代码中加载css样式表的地方，它位于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>

有人可以向我解释为什么加载拖拽需要大约50秒 - * .gifs和箭头上下GIF。我真的很困惑为什么加载简单的图像需要这么长时间。这可能是缓存问题吗？这是我从我的网页上得到的结果的图像。

Answer 1

多个HTTP请求确实会减慢网页加载时间。请查看this CSS sprites tutorial，了解如何显着提高速度。