包括js旋转图像与保留9个不同的图像？

Question

我必须实现一个仪表，如下所示：

现在我根据百分比（10-90％）将针移动到9个不同的位置

我可以通过两种不同的方式实现这一点：

1- jQuery rotate js, in which I have to include one js file in my page.
2- I have to keep 9 different images of needle and use them according to my need.

所以我想知道哪种方法可以更好地保持页面优化以保持谷歌页面速度？

感谢

Answer 1

我认为数字1更快，因为浏览器不需要缓存9个不同的图像。

要旋转de needle，您可以使用transform: rotate(Xdeg);。

Transform docs

Answer 2

您可以使用transform: rotate(xdeg);，如果您希望同时支持IE7和IE8您需要包含Matrix Transform：

filter: progid:DXImageTransform.Microsoft.Matrix(
  M11 = COS_THETA,
  M12 = -SIN_THETA,
  M21 = SIN_THETA,
  M22 = COS_THETA,
  sizingMethod = 'auto expand'
);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(
  M11 = COS_THETA,
  M12 = -SIN_THETA,
  M21 = SIN_THETA,
  M22 = COS_THETA,
  SizingMethod = 'auto expand'
)";

您可以查看此网站以了解矩阵计算：http://www.boogdesign.com/examples/transforms/matrix-calculator.html

这是一个jsfiddle演示：http://jsfiddle.net/2Yz6w/

但我也认为9针图像对页面加载时间影响不大。