元素的背景圖像可以被修改的頻率是否有限制？

// 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
把一個斷點到代碼，打破這一點，然後允許執行繼續，導致進度條的填充重新出現！

EDIT2：下面是它發生視頻：http://screencast.com/t/DvzBr06f

來源

2013-07-25 Sean Anderson

不，沒有限制你可以改變一個css屬性的次數。 – adeneo

很高興知道。謝謝。 –

發生這種情況時，「fill」變量的確切值是什麼？添加另一個檢查，看看它是否觸發過if'fill（填寫< 0 || fill > 1）' – Ma3x

沒有限制。你使用的是什麼瀏覽器？瀏覽器緩存可能存在一些問題，因此請儘量不要更改圖片。下面是測試我放在一起，工作正常，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); 
    };

來源

2014-05-03 18:42:18 Progo

謝謝你的例子。這個問題最終消失了，但由於它的票數很高，我留下了這個問題。現在關閉它，因爲這是最好的迴應。 –

也許你能避免改變BG爲< 0.3％粒度？

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

希望如果這是一個資源問題，300次將是可行的 - 在那裏10,000次可能不會。

來源

2013-07-26 02:34:10

不，沒有限制。您可以儘可能多地修改圖像，但可能會存在有關緩存和資源的問題，請將該值保持在10000以內。

來源

2013-09-02 07:11:36 Deadpool

不，據我所知，沒有限制。我不認爲它真的影響了任何事情。

來源

2014-02-26 14:38:09 Susan

請解釋你的答案。 – Irfan

元素的背景圖像可以被修改的頻率是否有限制？

回答

相關問題