元素的背景图像修改的频率是否有限制？

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);
});

我正在使用上面的javascript来填充进度条以使用渐变来修改其背景图像.

非常间歇性 - 背景图像完全停止渲染.我已经在整个代码中放置了日志记录,所有内容似乎都正常启动.我不是除以0,也不是我的填充0,但是背景图像停止显示.

如果我重新加载dom元素 - 它会再次开始工作!所以,我想知道我在这里做错了什么.也许我不能连续几个小时设置背景图像？

编辑:我将尝试获取一个简短的视频剪辑与一些日志记录突出显示该问题.我可能需要一些重现.

• 我在代码中加了一个断点,并将fill的值视为大于0且小于1的值.在这个例子中,它的值是0.6925

• 在代码中加入断点,打破点然后允许执行继续会导致进度条的填充重新出现!

EDIT2:这是一个发生的视频:http://screencast.com/t/DvzBr06f

Answer 1

没有限制。你使用的是什么浏览器？浏览器缓存可能存在一些问题，因此尽量不要对图像进行过多更改。这是我整理的一个测试，它运行良好，FIDDLE和代码：

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);
    };