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
Post a Comment