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

Здесь я загружаю таблицу стилей CSS в свой классический asp-код, который находится в заголовке 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>

Может кто-тоОбъясните мне, почему для загрузки перетаскиваемых файлов * -. GIF и стрелок вверх и вниз GIF требуется около 50 секунд.Я действительно запутался, почему загрузка простых изображений занимает так много времени.Может ли это быть проблемой с кешем?Вот изображение для результатов, которые я получил с моей веб-страницы.

Answer 1

Несколько HTTP-запросов действительно могут замедлить время загрузки веб-страницы.Взгляните на это руководство по спрайтам CSS , чтобы получить представление о том, как добиться существенного улучшения скорости.