0

IE9 での正しい JavaScript の表示に問題があります。他のブラウザ (Firefox、Opera、Chrome、Safari) は問題なく動作しますが、IE のアニメーションは流暢ではありません。たとえば、左から右にドラッグできるこの行を参照してください (投稿の最後にあるリンク)。

JavaScript コード:

var w = 1250;
var h = 650;

var drawing = Raphael("obrazek",w,h);                                                 

var Ax = 50
var Ay = 50
var Ey = 500

var w = 1250;
var h = 650;

var drawing = Raphael("obrazek",w,h);                                                 

var Ax = 50
var     function onDragMove(dx,dz) {
    this.onDragUpdate(dx - (this.deltax || 0), dz - (this.deltaz || 0));
    this.deltax = dx;
    this.deltaz = dz;
}
function onDragStart() { this.deltax = this.deltaz = 0; }

function onDragStop() { this.onDragStop(); }


// line 1                 
var Ax
var line = drawing.path([["M",Ax,Ay],["L",Ax,Ey]]).attr({"stroke-width":3})
line.drag(onDragMove,onDragStart)
line.attr({"cursor":"move"})
line.onDragUpdate = function(dx,dz) {

Ax += dx
line.attr({"path":[["M",Ax,Ay],["L",Ax,Ey]]})

}

および対応する HTML:

<html>
    <head>
         <script src="raphael.js"></script>
    </head>
    <body>
        <div id="obrazek">
            <script src="ietest.js"></script>
        </div>
    </body>                
</html>

または、ここで IE9 の問題を参照して、Chrome と比較してください。

http://mech.fsv.cvut.cz/~stransky/ietest/ietest.html

助けてくれてありがとう。

4

1 に答える 1

0

ページに doctype がないため、quirks モードでレンダリングされます。IE9 は、互換モードで SVG の代わりに VML を使用するため、レンダリングが遅くなる可能性があります。これを html の最初の行に追加するだけです。

<!DOCTYPE html>

ただし、コードには他にもいくつかの問題があります。

  1. セミコロンがありません。どのように危険であるかについての適切な説明があります。
  2. 変数の再宣言と再定義。
  3. mousemove や scroll などの急速に繰り返されるイベントを処理する場合は、再描画/再描画の不具合やパフォーマンスの問題を回避するためにスロットリングを使用するのが合理的です。詳細については、こちらをご覧ください。そのサイトのプラグインを含め、dragバインディングを次のものに置き換えます。

line.drag($.throttle(30, onDragMove), onDragStart);

実際、doctype を指定せずにこれを行うだけでも、レンダリングのパフォーマンスが大幅に向上しますが、doctype を指定しない理由はありません。

于 2012-07-12T12:27:54.560 に答える