javascript - Is there a limit to how often an element's background-image can be modified? -
// repaints progress bar's filled-in amount based on % of time elapsed current video. progressbar.change(function () { var currenttime = $(this).val(); var totaltime = parseint($(this).prop('max'), 10); // don't divide 0. var fill = totaltime !== 0 ? currenttime / totaltime : 0; // edit: added check, testing now. if (fill < 0 || fill > 1) throw "wow should not have been " + fill; var backgroundimage = '-webkit-gradient(linear,left top, right top, from(#ccc), color-stop(' + fill + ',#ccc), color-stop(' + fill + ',rgba(0,0,0,0)), to(rgba(0,0,0,0)))'; $(this).css('background-image', backgroundimage); });
i'm filling progress bar on time using above javascript modify background-image gradient.
extremely intermittently -- background image entirely stops rendering. i've placed logging throughout code , seems firing properly. i'm not dividing 0, nor fill 0, background image stops showing up.
if reload dom element -- starts work again! so, i'm wondering if i'm doing wrong here. maybe can't set background-image continuously hours?
edit: i'm going try , short video clip going logging highlight issue. might take me bit reproduce.
i put breakpoint code , observed value of fill value greater 0 , less 1. in instance value 0.6925
putting breakpoint code, breaking on point , allowing execution continue causes progress bar's fill re-appear!
edit2: here's video of happening: http://screencast.com/t/dvzbr06f
there no limit. browser using? there may few issues browser cache, try not change image much. here test put together, works fine, fiddle , code:
css:
div { height:25px; }
html:
<div id="pg"></div>
js:
var counter = 0, alpha = window.setinterval(function(){ counter++; if(counter > 60){ window.clearinterval(alpha); } else { progressbar("#pg", counter); } }, 500), progressbar = function (elem, val) { var fill = val / 60; var backgroundimage = '-webkit-gradient(linear,left top, right top, from(#ccc), color-stop(' + fill + ',#ccc), color-stop(' + fill + ',rgba(0,0,0,0)), to(rgba(0,0,0,0)))'; $(elem).css('background-image', backgroundimage); };
Comments
Post a Comment