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 在 quirks 模式下使用 VML 而不是 SVG，这可能会导致渲染速度变慢。只需将其添加到您的 html 的第一行：

<!DOCTYPE html>

但是，您的代码还有其他一些问题：

  1. 缺少分号。有一个很好的解释它可能是多么危险。
  2. 变量重新声明和重新定义。
  3. 在处理鼠标移动或滚动等快速重复事件时，使用节流来避免重绘/重绘故障和性能问题是合理的。你可以在这里阅读更多关于它的信息。包含来自该站点的插件并将您的drag绑定替换为以下内容：

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

事实上，即使在不指定 doctype 的情况下这样做也可以大大提高渲染性能，但没有理由不完全指定它。

于 2012-07-12T12:27:54.560 回答