在Chrome和Safari中執行焦點對焦功能

我正嘗試構建一個全尺寸的背景滑塊，該選項卡/窗口處於非活動狀態時停止播放，並在焦點繼續時繼續播放。在Chrome和Safari中執行焦點對焦功能

問題是，Chrome和Safari都不會在加載/刷新頁面時做任何事情 - 您必須單擊並 - 然後在窗口內才能啓動動畫。

有什麼辦法可以避免這種情況？

這是到目前爲止我的代碼：

$(window).load(function(){ 
    var autopager; 

    function startAutopager() { 
     autopager = window.setInterval("slideSwitch()", 5000); 
    } 

    function stopAutopager() { 
     window.clearInterval(autopager); 
    } 

    window.addEventListener('focus', startAutopager); 
    window.addEventListener('blur', stopAutopager); 

    slideSwitch(); 
    $("#sliderContent img").fullBg(); 
});

這將啓動動畫兩種瀏覽器，但是當我點擊窗外再次它不會停止：

if(true == $.browser.safari || true == $.browser.chrome) { 
    startAutopager(); 
}

希望有人能夠幫助。

乾杯！

來源

2011-10-20 Manticore

有沒有原因你沒有使用jQuery的方法來綁定事件？另外，我注意到你正在使用setInterval，在文檔中強烈建議不要這樣做：[link]（http://api.jquery.com/animate/）請參閱「其他注意事項」 –

感謝您的回答！我不知道約束事件，但我會看看這個。 SetInterval可能不鼓勵，但在我的情況下，這是沒有問題，或者它？ – Manticore

在我看來，知道JS，焦點/模糊並不總是被正確調用。焦點可能會連續調用兩次......導致您的slideSwitch（）函數觸發兩次：「排隊」多於您想要的動畫。完美的做法可能是使用： 'if（autopager）window.clearInterval（autopager）;' 'autopager = window.setInterval（「slideSwitch（）」，5000）;' –

試試這個，讓我知道它的評論。 :)

$(function(){ 
    $("#sliderContent img").fullBg(); 

    var autopager; 
    function startAutopager() { 
    if (autopager) window.clearInterval(autopager); 
    autopager = window.setInterval("slideSwitch()", 5000); 
    } 
    function stopAutopager() { 
    window.clearInterval(autopager); 
    } 
    window.focus(startAutopager); 
    window.blur(stopAutopager); 
    startAutopager() 
});

來源

2011-10-20 14:38:49

首先謝謝！我替換了 window.focus（startAutopager）; window.blur（stopAutopager）; by window.addEventListener（'focus'，startAutopager）; window.addEventListener（'blur'，stopAutopager）; 現在它似乎工作！ – Manticore

在Chrome和Safari中執行焦點對焦功能

回答

相關問題