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


//  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 元素 - 它又开始工作了!所以,我想知道我是否只是在这里做错了什么。也许我不能连续几个小时设置背景图像?

编辑:我将尝试制作一个简短的视频剪辑,并进行一些日志记录以突出显示该问题。我可能需要一点时间来重现。

  • 我在代码中放置了一个断点,并观察到填充值是大于 0 且小于 1 的值。在本例中,其值为 0.6925

  • 在代码中放置一个断点,在该点上中断,然后允许继续执行会导致进度条的填充重新出现!

编辑2:这是它发生的视频:http://screencast.com/t/DvzBr06f

没有限制。您使用的是什么浏览器?浏览器缓存可能存在一些问题,因此尽量不要对图像进行太多更改。这是我整理的一个测试,它工作正常,小提琴和代码:

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

也许您可以避免将 BG 更改为 0.3% <粒度?>

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

希望如果这是一个资源问题,300次是可行的 - 10,000次可能不行。

不,没有限制。您可以根据需要修改映像,但缓存和资源可能存在问题,因此请将该值保持在 10000 以内。

不,据我所知,没有限制。而且我认为它根本没有真正影响任何事情。

最新更新