包含js旋轉圖像vs保持9個不同的圖像？

我要實現一個測量儀，如下圖所示： enter image description here 包含js旋轉圖像vs保持9個不同的圖像？

現在我必須根據

我可以實現這個使用兩種不同方式的比例（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.

所以我想知道哪種方法更好地保持優化頁面的谷歌頁面速度記？

感謝

來源

2014-02-20 Anubhav

我認爲1號是速度更快，因爲瀏覽器將不再需要緩存9個不同的圖像。可以使用transform: rotate(Xdeg);。

Transform docs

來源

2014-02-20 04:32:23 vsgoulart

但它不會在IE9，IE7和IE8中工作。那麼我必須在某些事件中顯示這些圖像。在頁面首次加載時，它不會在那裏。 – Anubhav

您可以在IE9 +上使用'transform'。 – vsgoulart

是真的，但IE8和IE7怎麼樣 – Anubhav

您可以使用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針圖像對頁面加載時間沒有太大的影響。

來源

2014-02-20 04:59:59

包含js旋轉圖像vs保持9個不同的圖像？

回答

相關問題