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>

谁能向我解释一下为什么加载 Drag-*.gif 和上下箭头 gif 需要大约 50 秒。我真的很困惑为什么加载简单的图像需要这么长时间。这可能是缓存问题吗？这是我从网页获得的结果的图片。

Answer 1

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