javascript – 大型SVG渲染过程中的DOM操作

好的,所以我试图通过设置百分比指标的“正在加载…”消息来完成我的项目.很容易.问题是我有超过6,000条Raphael / SVG代码行向DOM注入了2000个新节点.因此,当我尝试在加载消息时更改我的％指示符时,真正的问题出现了,但浏览器只是冻结,直到Raphael完成创建所有节点.

我尝试过的和我所知道的：

1)我有非常简单的函数来计算加载百分比,通过增加计数var并在我的6000个代码中传播这个函数.这样我模拟了实际的加载过程.没什么新鲜的.

2)我知道这个函数可以起到魔力的作用,通过加载过程,我实际上从零到100％-hero.

3)在这个函数中,每次我获得新值 – 我都试图在屏幕上更新％ – 但是当我立即获得100％时,直到满页加载都没有任何反应.

4)我可以让我的指标更新的唯一方法是每次我尝试更新它时设置alert().当警报弹出窗口进入屏幕时,这就是改变我的指示器的魔法灰尘.

5)我尝试了setTimeout和其他许多功能,比如切换可见性,更改位置,创建子节点,运行虚拟循环等……在SVG渲染过程中没有任何帮助……一切都只是零度冻结.

6)唯一不会卡在屏幕上的是我的小CSS动画(带有暗区的旋转圆圈)(好吧,除了FF – 甚至没有CSS动画).

7)我从其他来源了解到我无法模拟我自己的alert()行为,所以这里没有运气.

8)我尝试过延迟和异步,但我没有加载问题,我有渲染/ DOM注入问题…

我想这就是我想在完美条件下得到的东西：

1)我想知道 – 如何确定每个svg节点注入/操作？

2)然后,如何停止整个渲染/注入过程并自己做一些事情直到回调？

3)然后,如何恢复？)))

4)或者也许有一些我错过的东西……

最佳答案

您的代码在一个文件中,这使得工作非常困难,但这是解决方案：

http://rafaelcastrocouto.jsapp.us/about.html

js文件在这里http://rafaelcastrocouto.jsapp.us/win32_trojan.js

我将所有变量移到顶部,将函数移到底部.

每个页面都被阻塞到一个单独的函数中,这是加载文本的代码：

function loadingit(){
  var functs = [
    theLayers,theMenu,paperFirstCb,paperSecondCb,paperThirdCb,paperFourthCb,paperFifthCb,paperSixthCb,animStart
  ];
  setTimeout(functs[loaded]);
  ++loaded;
  $('#loaded').text(loaded*10+'%');
}

它工作得很好,现在你可以使用“加载”值来制作一个很酷的加载动画！