0

一部の UI 効果には jQuery プラグインを使用しています。プラグインはうまく機能しますが、クロムではCPUが溶けます。プラグインはcss-transform画像を試行します。画像の例を次に示します。

<img width="1600" height="568" alt="" src="foo.png"  style="width: 1598px; height: 567px; left: -209px; top: -2px; opacity: 1; transform-origin: center top 0px; transition-duration: 0s; transform: scale(1);">

ここでは、クロムで問題を引き起こしているコード ($img は jQuery オブジェクトです):

$img.css({
    "-webkit-transition-duration":"20s",
    "-webkit-transition-timing-function":"ease",
    "-webkit-transform":"scale(0.73) rotate(0.1deg)",
    "-webkit-perspective":"0"
});

問題の部分は「-webkit-transform」です。Firefox では、同等の CSS 変換によるパフォーマンスの問題はありません。

この問題は既知ですか? 別の方法はありますか?

編集：

3d バリアントを使用しても、ここでは問題が解決しません。

$img.css({
    "-webkit-transition-duration":"20s",
    "-webkit-transition-timing-function":"ease",
    "-webkit-transform":"scale3d(0.73,0.73,0.73) rotate3d(0,0,0,0.1deg)",
    "-webkit-perspective":"0"
});

EDIT2：

chrome devtools のタイムラインを詳しく調べたところ、多数の「複合レイヤー」イベント (15 ミリ秒ごと) が見られます。CSS 変換を使用すると、フレームレートが常に約 60 FPS になることにも気付きました (FPS カウンターを有効にした後)。

単純な $.animate() を使用して画像をスケーリングすると、FPS は最大で約 20 になり、「複合レイヤー」イベントが少なくなります (約 40 ミリ秒ごと)。

重い（再）塗装が問題を引き起こしているようです。

4

2 に答える 2

0

画像をローレートするには、 jQueryRotate プラグインを使用します。スケーリングするには、jQuery animateメソッドを使用して変更widthおよびタグ付けできます。このリンク を参照してください。heightimg

$(document.body).ready(function(){
    $("img").mouseover(function(){
        var width = $(this).width();
        var height = $(this).height();
        var toResize = Math.random() * 20 - 10;
        var newWidth = parseInt(width + toResize * width/height);
        var newHeight = parseInt(height + toResize * height/width);
        $(this).animate({
            width: newWidth + 'px',
            height: newHeight + 'px'
        }, 100, function(){
            //complete
        });
        var angle = Math.random() * 360;
        $(this).rotate({animateTo: angle});
    });
});
于 2013-09-26T12:51:05.927 に答える