Sprite и преимущество

Question

Когда использовать спрайты и если не использовать его

Я получил 50 значков, которые я хотел бы сделать в качестве спрайта, но я попал в сомнении, когда я узнал, что я был нуждаясь 1-3 икон при одной загрузке страницы - и 1 значок имеют размер 400-500 байт, а общий спрайт имеет размер 28kb

Что лучше всего подходит для загрузки, загружайте их отдельно или в спрайте и сколько вы экономите с уменьшением из http звонков? (из-за его зависимости от того, насколько вы находитесь на сервере и т. д. но это их алгоритм, который я могу вложить в это и рассчитать коэффициент пользы от моей нагрузки)

кроме того, чтобы сделать тест на реальном сервере, который не является возможно в этом случае.

Answer 1

Это зависит от того, как ведут себя ваши пользователи, или, скорее, того, как ведет себя ваш средний пользователь (AU).

Если AU дважды отправляется на ваш сайт, вы должны просто загрузить нужные значки. Если AU много идет на ваш сайт и посещает множество разных страниц (которые требуют большей части изображений в вашем спрайте), тогда лучше использовать спрайт.

Большинство браузеров будут кэшировать ваш спрайт, так что его нужно будет загружать только в любом случае. (что также верно для отдельных изображений)

28 Kb на самом деле не такой большой, поэтому лично я бы отправился на спрайт-маршрут, если у вас не было много пользователей с низкой пропускной способностью.

Answer 2

Плохо, я не знал, что вы хотите контролировать свои рамки. С анимацией .gif вы не можете ее контролировать, когда она загружается, она просто идет.
Но, как вы сказали, вы можете просто справиться с этим, просто используйте изображение background: url().
Возможно, вы захотите внести изменения в спрайты; например: когда вам нужны только 3 кадра, вы можете создать спрайт из этих трех кадров. Таким образом, размер спрайта, который должен загружать браузер, не такой большой, как полный спрайт.

var frame = 1; 

$('.back').attr("disabled", true); 

$(".next").click(function(e)   
{ 
    $('.back').attr("disabled", false); 
    $('.sprite').animate({backgroundPositionX: "+=-43px"}, 1); 
    frame += 1; 
    if(frame == 6) 
    { 
     $('.next').attr("disabled", true); 
    } 
}) 

$(".back").click(function(e)   
{ 
    $('.next').attr("disabled", false); 
    $('.sprite').animate({backgroundPositionX: "+=43px"}, 1); 

    frame -= 1; 
    if(frame == 1) 
    { 
     $('.back').attr("disabled", true); 
    } 
}) 

Теперь я использовал только ось X для этого, так что одна строка спрайтов.

Here является примером.