评价系统映像效率

Question

我正在我的网站上建立一个5星评级系统，并有两个选项来显示显示明星的图像。这些代表评级的图像将在列表中的每个记录上显示一个，该列表将增长到大约200 - 300个记录长度。

选项一:每个可能的评级都有一个完整的图像，包括半星。所以我需要11张图片，从00000(还没有评级)到11111(5星)。这意味着网页将加载9个图像，但列表的每一行只显示一个图像。

选项二:三个图像0(无星)，1/2(半星)，1(1星)。因此，该页面仅加载3张图片，但对于列表的每一行，将显示5张图片的组合，从而获得5星评级。例如1,1,1/2.0.0 (2.5星)。

所以问题是，加载的图像少但网页上显示的图像多5倍，还是加载的图像多但每个记录显示的图像少5倍，哪个更有效率。我想要的方法，将加载页面最快的200个项目的列表。

谢谢。

Answer 1

下面是最有效的方法。

将这11张不同评级可能性的图像放入一个大的图像文件中，不同的可能性堆叠在一起。然后，您可以使用CSS来设置将用于表示星星的元素的背景。每当用户将鼠标悬停在包含此子画面的元素上或单击该元素时，您都可以使用CSS更改元素的背景位置，以显示不同的评级表示。

#ratings {
   background-image: url('myratingssprite.png');
   background-position: 0 0;
}
  #ratings:hover {
    background-position: 0 150px; /* Change the background's position to a more suitable area of the ratings sprite */
  }
  #ratings.four_stars {
    background-position: 0 200px; /* Move around the sprite to show the area with the 4 stars representation */
  }