IE9 raphael动画问题

我在IE9中显示正确的javascript有问题。其他浏览器（Firefox，Opera，Chrome，Safari）运行良好，但IE中的动画并不流畅。例如看到这条线可以从左到右拖动（链接在帖子的末尾）。IE9 raphael动画问题

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

谢谢寻求帮助。

来源

2012-07-12 user1520592

您的页面缺少doctype，因此呈现为怪癖模式。 IE9在怪异模式下使用VML而不是SVG，这可能导致渲染速度变慢。只需添加这对您的HTML的第一行：

<!DOCTYPE html>

然而，你的代码有一些其他问题：

缺少分号。有一个good explanation它可能是危险的。
变量重新声明和重新定义。
当处理像mousemove或scroll这样的快速重复事件时，使用调节来避免重新绘制/重绘毛刺和性能问题是合理的。你可以阅读更多关于它here。包括来自该网站的插件，并替换为以下您drag结合：

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

事实上，即使这样做不指定文档类型可以大大提高渲染性能，但是没有理由不指定它完全。

来源

2012-07-12 12:27:54 unclenorton

非常感谢！添加DOCTYPE完成了这项工作。 – user1520592 2012-07-12 12:46:06

IE9 raphael动画问题

回答

相关问题