1

私が書いている画像の「​​ズーム/パン」コードについて、Chrome で奇妙な動作が見られます。他のブラウザでは高品質のサイズ変更された .jpg 画像がレンダリングされないように見えるため、Chrome でのみ問題が発生します。

画面をクリックしてドラッグすると、javascript と絶対配置 (上/左) を使用して画面上を移動し、画像を表示します。私の完全なプロジェクトでは、画面の一部を占めるコンテナ div と、大きな画像 (4200x4200px) を含む別の div があります。クロムでは、画像をどのように「ズームイン」したかによって、応答が非常に「遅く」なりました。私が話していることを皆さんに示すために、いくつかの簡単なテストを書きました。

フルスクリーン モードで 1920x1080 以上の解像度でサンプルを実行してください。これは、div コンテナーがイメージ idv (800x800px にサイズ変更) より小さいパンニング コードです。 テスト 1 画像が div の高さいっぱいになると、パンのパフォーマンスが非常に悪いことに注意してください。画像の表示部分が div の高さ全体を占めていない場合は、かなり滑らかです。

次は同じコードですが、唯一の変更点は、div コンテナーが img div (801px) よりも 1 ピクセル多く設定されていることです。現在、画像のパンニングは常に非常にスムーズです。 テスト 2

他にもテストがありますが、スタック オーバーフローによりリンクが 2 つに制限されています。パン ハンドラー関数は次のとおりです。 boardPanHandler2(event) { var newLeft; var newTop;

    if (gBoardMouseDownFlag) {

            newLeft = gBoardPanLeftStart + event.pageX - gBoardPanPageXStart;


            newTop = gBoardPanTopStart + event.pageY - gBoardPanPageYStart;


            $(".div-board").css('left', newLeft).css('top', newTop);
            //$(".div-board").css('transform', 'translate(' + newLeft + 'px, ' + newTop + 'px)');
    }

    $("h1").text($(".div-board").width() + "," + $(".div-board").height() + " " + gBoardContainerX + "," + gBoardContainerY);
}

私は一般的にhtml/css/javascriptにかなり慣れていないので、気楽にやってください。どんな洞察も素晴らしいでしょう！

4

1 に答える 1

2

ドラッグする必要がある他の大きな画像に追加-webkit-backface-visibility: hidden;します。.img-board

.img-board
{
    position:absolute;
    width:100%;
    height:100%;
    -webkit-backface-visibility: hidden;
}

http://jsfiddle.net/WtjT5/34/

Re「chrome でリサイズした画像の画質が良くない」

私が行った最初の提案を元に戻し、新しい css クラスを追加します

.noantialias{
    -webkit-backface-visibility: hidden;
}

ドラッグアンドリリースでそれを追加および削除します。イベントがわかっているときにこれを使用してこれを行うようにフィドルを更新しました

$(event.target).addClass('noantialias');

マウスアップ（リリース）はウィンドウにバインドされているため、それがトリガーされたときにすべてを削除するだけです

$('.noantialias').removeClass('noantialias');

http://jsfiddle.net/WtjT5/41/

于 2013-10-20T21:58:07.907 に答える