Question

何时使用精灵以及何时不使用精灵

我有50个图标，我将作为一个精灵，但我怀疑当我发现我需要1-3页的图标在一个页面加载 - 和1个图标的大小为400-500字节和总精灵的大小为28kb

什么是最好的性能加载他们个人或精灵，你节省多少http呼叫？（ofc取决于你离服务器有多远，但这是他们的算法，我可以把它放入并计算我负载的成本效益因素）

除了在实时服务器上做一个基准测试，在这种情况下是不可行的。

Answer 1

这完全取决于用户的行为方式，或者说平均用户（AU）的行为方式。

如果AU有两次进入您的网站，只需加载您需要的图标就会更快。如果AU去了你的网站很多，并访问了很多不同的页面（需要你的精灵中的大部分图像），那么最好使用一个精灵。

大多数浏览器会缓存你的精灵，所以它只需要加载一次。（个别图像也是如此）

28 Kb真的不是那么大，所以我个人会去精灵路线，除非你有很多低带宽用户。

Answer 2

我的不好，我不知道你想控制你的画面。使用.gif动画，你无法控制它，当它加载它就会去。
但正如你所说，你可以制作它的精灵，只需使用background: url()图像即可。
你可能想要改变精灵;例如：当你只需要3帧时，可以制作这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 就是一个例子。

雪碧和好处

2 个答案: