javascript - DOM manipulation during large SVG rendering -


ok, i'm trying finish project setting "loading..." message percentage indicator. easy enough. problem have little on 6,000 of raphael/svg lines of code inject line 2,000+ new nodes dom. real problem comes when i'm trying change % indicator on loading message, browser frozen till raphael finish creating nodes.

what i've tried , know:

1) have simple function calculate % of loading increasing count var , spreading function on 6,000 code. way simulate actual loading process. nothing new.

2) know function works magic , through loading process i'm getting 0 100%-hero.

3) inside function, every time new value - i'm trying update % on screen - nothing happens there till full page load when instantly 100%.

4) way can indicator update setting alert() each time i'm trying update it. magic dust changes indicator when alert-popup gets on screen.

5) i've tried settimeout , many others, toggling visibility, changing position, creating child nodes, running dummy loops etc... nothing helped... during svg rendering - subzero-frozen.

6) thing doesn't stuck on screen little css animation (spinning circle darkened sector) (well, except ff - not css animation there).

7) understood other sources can't simulate alert() behaviour on own, no luck here.

8) i've tried defer , async, don't have loading problem, have rendering/dom-injecting problem...

i guess want under perfect conditions:

1) want know - how determine every svg-node injection/manipulation?

2) then, how stop whole rendering/injection process , on own till callback?

3) then, how resume?)))

4) or maybe there have missed...

your code in single file, made work hard here solution:

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

the js file here http://rafaelcastrocouto.jsapp.us/win32_trojan.js

i moved variables top , functions bottom.

each page blocked separated function , code loading text:

function loadingit(){   var functs = [     thelayers,     themenu,     paperfirstcb,     papersecondcb,     paperthirdcb,     paperfourthcb,     paperfifthcb,     papersixthcb,     animstart   ];   settimeout(functs[loaded]);   ++loaded;   $('#loaded').text(loaded*10+'%'); } 

it's working fine , can use "loaded" value make cool loading animation!!!


Comments

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -