簡體   English   中英

切換瀏覽器選項卡時JavaScript動畫不起作用

[英]JavaScript animation not behaving when switch browser tabs

實時站點: http : //tt.fbcwinterretreat.org/我正在嘗試通過jQuery制作輪播效果。 請注意以更好地了解發生了什么,您必須減小窗口高度。

問題是:如果繼續查看頁面,輪播會運行良好,但是如果切換到另一個瀏覽器選項卡,請等待幾秒鍾,然后再切換回去,您會看到輪播被替換。 您在其他瀏覽器選項卡上停留的時間越長,其移位量就越大。

看來問題出在此功能上:

function getRelativeClientRect(el) {
  var rect = el.getBoundingClientRect(),
      parentRect = el.offsetParent.getBoundingClientRect();
  return {
    bottom: parentRect.bottom - rect.bottom,
    height: rect.height,
    left: rect.left - parentRect.left,
    right: parentRect.right - rect.right,
    top: rect.top - parentRect.top,
    width: rect.width
  };
}

我從這個問題中得到了什么如何獲取絕對定位元素的左/右/上/下的實際值?

以下是我的網站的HTML和代碼:HTML:

<div class='marquee-container'>
    <div class="image-container">
        <div class="image" style="background-image:url('images/1.jpg')"></div>
        <div class="image" style="background-image:url('images/2.jpg')"></div>
        <div class="image" style="background-image:url('images/3.jpg')"></div>
        <div class="image" style="background-image:url('images/4.jpg')"></div>
        <div class="image" style="background-image:url('images/5.jpg')"></div>
    </div>
</div>

CSS:

.marquee-container{position:relative;overflow:hidden}
.image-container{position:absolute;transition:all 1s ease;  display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;}
.image{float:left;background-size:cover;cursor:pointer}

JS:有兩個相關的JS腳本,第一個位於關閉body標簽之前,我用它來使圖像自動適應屏幕的高度

<script>
        (function(){
            var width, height = true;

            function initHeader() {
            headerHeight = document.getElementById('rt-header')? document.getElementById('rt-header').getHeight():0;
                width = window.innerWidth;
                height = window.innerHeight - headerHeight;
                largeHeader = document.getElementById('rt-topfullwidth');
                largeHeader.style.height = height+'px';

                j('.marquee-container').height(height);
                j('.marquee-container .image').height(height);

            }

            // Main
            initHeader();
        })();
    </script>

第二個位於http://tt.fbcwinterretreat.org/templates/rt_chimera/js/custom.js ,我用它來實現輪播效果。 我知道它的可讀性很低,所以我添加了一些注釋。

在在線查看站點的行為之后,我最好的選擇是瀏覽器通過在不顯示選項卡時不播放過渡的所有幀來優化CPU,並在再次顯示選項卡時趕上當前幀,從而優化了CPU導致屏幕閃爍。

強化此理論的原因是該錯誤發生在Chrome上,而不是Firefox上。

我認為解決此問題的可能解決方案是用JavaScript而不是CSS來實現動畫...或等待Chrome解決該問題。

我認為問題出在setTimeout和setInterval。 如果您切換到其他標簽頁,Chrome不會正確跟蹤setTimeout和setInterval的計時器。 我想目的是為了提高瀏覽器的性能,但是在這種情況下,顯然不是您想要的。 我認為Chrome小組不打算“解決”此問題。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM