雪碧与效益

Question

什么时候使用精灵什么时候不使用它

我有50个图标，这是我作为一个精灵，但当我发现我需要1-3的图标在一次页面加载和一个图标的大小为400-500字节和总雪碧有28 as的大小时，我有疑问。

什么是性能最好的加载他们个人或在一个雪碧和您节省了多少与减少http调用？(ofc取决于您离服务器有多远，但它是他们的算法，我可以将其放入其中并计算负载的成本效益因子)

除了在活动服务器上执行基准测试之外，在这种情况下也是不可行的。

Answer 1

这完全取决于用户的行为，或者更确切地说，取决于您的普通用户(AU)的行为。

如果AU去你的网站两次，它将更快，只是加载你需要的图标。如果AU经常访问您的站点，并访问许多不同的页面(这需要您的雪碧中的大多数图像)，那么最好使用一个sprite。

大多数浏览器都会缓存您的sprite，因此无论如何它只需要加载一次。(对于个别图像也是如此)

28 Kb真的没有那么大，所以我个人会走雪碧路线，除非你有很多低带宽的用户。

Answer 2

我的错，我不知道你想控制你的身体。使用.gif动画，您无法控制它，当它加载时，它就会运行。

但是，正如您所说的，您只需使用background: url()图像就可以制作精灵。

您可能需要对精灵进行变体；例如:当您只需要3帧时，您可以用这3帧制作一个精灵。因此，浏览器必须加载的sprite的大小并不像完整的sprite那么大。

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轴来做这个，所以有一行精灵。

这里就是一个例子。