0

我正在我的网站上建立一个 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 倍。我想要使​​用 200 项列表最快加载页面的方法。

谢谢你。

4

1 回答 1

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 */
  }
于 2013-04-11T22:06:35.823 回答