Is there a limit to how often an element's background-image can be modified?

Question

//  Repaints the progress bar's filled-in amount based on the % of time elapsed for current video.
progressBar.change(function () {
    var currentTime = $(this).val();
    var totalTime = parseInt($(this).prop('max'), 10);

    //  Don't divide by 0.
    var fill = totalTime !== 0 ? currentTime / totalTime : 0;

    //  EDIT: Added this check, testing with it now.
    if (fill < 0 || fill > 1) throw "Wow this really 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 a progress bar over time using the above javascript to modify its background-image with a gradient.

Extremely intermittently -- the background image just entirely stops rendering. I've placed logging throughout this code and everything seems to be firing properly. I'm not dividing by 0, nor is my fill 0, but the background image stops showing up.

If I reload the dom element -- it starts to work again! So, I'm wondering if I'm just doing something really wrong here. Maybe I can't set background-image like so continuously for hours?

EDIT: I'm going to try and get a short video clip going with some logging to highlight the issue. It might take me a bit to reproduce.

I put a breakpoint into the code and observed the value of fill to be a value greater than 0 and less than 1. In this instance its value was 0.6925
Putting a breakpoint into the code, breaking on the point and then allowing execution to continue causes the progress bar's fill to re-appear!

EDIT2: Here's a video of it happening: http://screencast.com/t/DvzBr06f

Nope, there's no limits to how many times you can change a css property. — adeneo, Jul 25 '13 at 18:31
What's the exact value of the `fill` variable when that happens? Add another check and see if it's ever triggered `if(fill < 0 || fill > 1)` — Ma3x, Jul 25 '13 at 18:41
As adeneo stated, there is no limit to how many times you can change background-image, but I would say that it isn't typically changed repeatedly. Do you see this happen in multiple browsers? — LoganGoesPlaces, Jul 25 '13 at 18:41
If you try to update with something else than a gradient will you still get stops? What browser(s) are you testing in? — , Jul 25 '13 at 18:47
I am only testing in the latest dev and beta channels of Google Chrome. I'll try and update this post with the information requested in the various comments. Give me a few. — Sean Anderson, Jul 25 '13 at 19:04
Is there a reason why you're constantly polling the DOM for your data? Aren't you already assigning it elsewhere in your code? Also, why are you constantly rebuilding your gradient? You should instead just use a container and resize a div inside it. — Etheryte, Feb 15 '14 at 15:45
I made a small example to demonstrate what I mean better: http://jsfiddle.net/M2wuP/ — Etheryte, Feb 15 '14 at 17:02

score 0 · Answer 1 · answered Jul 26 '13 at 02:34

Maybe you can avoid changing the BG for granularities of < 0.3%?

if (lastFill && (fill - lastFill) < 0.003) 
    return;    // don't draw < 0.3% increments.
// draw..
lastFill = fill;

Hopefully if it is a resource issue, 300 times would be doable -- where 10,000 times perhaps wouldn't.

score 0 · Answer 2 · answered Sep 02 '13 at 07:11

0

No, there is not limit. You can modify the image as much as you want, though there may be issues regarding the cache and resources, so keep the value within 10000.

answered Sep 02 '13 at 07:11

Deadpool

7,811
9
44
88

score 0 · Answer 3 · answered Feb 26 '14 at 14:38

0

No, as far as I know, there are no limits. And I don't think it really affects anything at all.

answered Feb 26 '14 at 14:38

Susan

283
1
3
9

Kindly explain you answer. – Irfan Feb 27 '14 at 07:37

score 0 · Accepted Answer · answered May 03 '14 at 18:42

There is no limit. What browser are you using? There may be a few issues with the browser cache, so try not to change the image too much. Here is a test I put together, which works fine, FIDDLE and 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);
    };

Thanks for the example. The problem eventually went away, but I left this question open since it had a high number of votes. Closing it now with yours since this is the best response. — Sean Anderson, May 03 '14 at 21:08

Is there a limit to how often an element's background-image can be modified?

4 Answers4