Question

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

选项一：每个可能评级的完整图像，包括半星。所以我需要从00000（没有评级）到11111（5星）的11张图片。这种方式意味着网页将加载9个图像，但每列只显示一个图像。

选项二：三个图像0（无星），1/2（半星），1（1星）。因此页面仅加载3个图像，但是对于列表的每一行，显示5个图像的组合以使得5星级评级。例如1,1,1 / 2.0.0（2.5星）。

所以问题是如何更有效地减少加载的图像，但是网页上显示的图像数量增加了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 */
  }

评级系统图像效率

1 个答案: