javascript - jQuery updates DOM element and calculations simultaneously -

-

so have page on button click, image added embellishments after performing various calculations on meta-data stored data-attributes.

since calculations can take few seconds, want show overlay on image. do:

$(selectedimageid).addclass('loading'); //perform series of calculations here... $(selectedimageid).removeclass('loading').addclass('calculated-embellishments');

i imagine script first show loading overlay on image, perform lengthy calculations, replace overlay selected embellishment class. seems dom updated @ end such never see loading class, directly jumps plain image embellishment class after few seconds.

if add alert('test') before last line adds embellishment can see loading overlay on image, not otherwise.

how can make work way want to, explained above? pointers welcome!

what happens "lengthy calculations" make browser "hang" processing, not having chance re-paint image reflect newly added loading class.

then once calculations done, last instruction replaces loading class calculated-embellishments class, , browser has time re-paint. loading class gone.

you have @ least 3 workarounds let browser display loading class before calculations keep busy:

  • use settimeout proposed @csum, bet on how time browser need before doing re-paint show image loading class. hence need "test" different timeout values, still without guarantee result depend on each client current performance (cpu, memory, current cpu load!).
  • start calculations in callback of "load" event of overlay (if image). not sure if "load" event guarantee of image (overlay) being painted (shown on screen).
  • use 2 nested requestanimationframe make sure @ least 1 re-paint has occured, before start calculations.

Comments

Post a Comment

Popular posts from this blog

ruby - Trying to change last to "x"s to 23 -

-
i have been playing around irb , have string looks this: irb(main):072:0> puts ["[\"4354 5432 5432 xxxxx\", \"6547 6547 8543 xxxxx\", \"2344 6543 6674 xxxxx\", \"2346 6236 7543 xxxxx\", \"1273 5585 5587 xxxxx\"]"] => nil irb(main):073:0> what want gsub last 2 "x" s of each 17 digit combination, 23 . what i've tried far (i've been using rubular): a.gsub(/\d[x]/,"23") <= grabs "x" s i'm close a.gsub(/\w[x{2}]/,"23") <= grabs "x" s grabs two digits each combination. is there easier way i'm not understanding? a.gsub(/\d{4} \d{4} \d{4} xxx\kxx/, '23') \d{4} = 4 digits what \k drop matched far. can use don't replace entire number, still able validate have in desired format.
Read more

jquery - Clone last and append item to closest class -

-
this bare-bones code on page: <div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> <div class="list-container"> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> <div class="single-list-item"> <button>remove</button> </div> </div> <p><button class="add-list-item">add</button></p> <di...
Read more

css - Can I use the :after pseudo-element on an input field? -

-
i trying use :after css pseudo-element on input field, not work. if use span , works ok. <style type="text/css"> .mystyle:after {content:url(smiley.gif);} .mystyle {color:red;} </style> this works (puts smiley after "buu!" , before "some more") <span class="mystyle">buuu!</span>a more this not work - colors somevalue in red, there no smiley. <input class="mystyle" type="text" value="somevalue"> what doing wrong? should use pseudo-selector? note: cannot add span around input , because being generated third-party control. :after , :before not supported in internet explorer 7 , under, on elements. it's not meant used on replaced elements such form elements (inputs) , image elements . in other words it's impossible pure css. however if using jquery can use $(".mystyle").after("add smiley here"); api docs on .after to ...
Read more