Включить js для поворота изображения и сохранения 9 различных изображений?

Question

я должен реализовать один метр, как показано ниже:

Теперь я переместить иглу 9 различных позиций в соответствии с процентом (10-90%)

можно реализовать это с помощью двух различных способов :

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. 

Так что я хочу знать, какой подход лучше поддерживать в оптимизации страницы для скорости страницы Google?

благодаря

Answer 1

Я думаю, что номер один быстрее, потому что браузер не нужно кэшировать 9 различных изображений.

Чтобы повернуть иглу, вы можете использовать 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 изображений иглы не так сильно влияют на время загрузки страницы.