檢查元素何時出現在視口中 - > addClass

Question

我在dom樹中有很多對象，當我們在視口中出現時，我正在添加新類。 但是我的代碼非常慢 - 它導致頁面變慢...

我有這樣的dom：

...
<span class="animation"></span>
...

和這樣的jquery：

$.each($('.animation'), function() {
  $(this).data('offset-top', Math.round($(this).offset().top));
});

var wH = $(window).height();

$(window).on('scroll resize load touchmove', function () {
  var windowScroll = $(this).scrollTop();

  $.each($('.animation'), function() {
    if (windowScroll > (($(this).data('offset-top') + 200) - wH)){
      $(this).addClass('isShownClass');
    }
  });

});

也許我可以以某種方式加快我的滾動檢查和課堂申請？

Answer 1

您可以使用Intersection Observer API檢測元素何時出現在視口中。 下面是一個示例，它將一個類添加到滾動到視口中的元素，並將背景顏色從紅色變為藍色：

 var targetElement = document.querySelector('.block'); var observer = new IntersectionObserver(onChange); observer.observe(targetElement); function onChange(entries) { entries.forEach(function (entry) { entry.target.classList.add('in-viewport'); observer.unobserve(entry.target); }); } 

 body { margin: 0; height: 9000px; } .block { width: 100%; height: 200px; margin-top: 2000px; background-color: red; transition: background 1s linear; } .block.in-viewport { background-color: blue; } 

 <div class="block"> </div> 

Answer 2

Intersection Observer API方法僅適用於chrome，但性能提高100％。 下面的代碼加載3/1000秒

 $(document).ready(function () { 'use strict'; var startTime, endTime, sum; startTime = Date.now(); var anim = $('.animation'); anim.each(function (index, elem) { var animoffset = $(elem).offset().top; $(window).on('scroll resize touchmove', function() { var winScTop = $(this).scrollTop(); var windowHeight = $(window).height(); var winBottom = winScTop + windowHeight; if ( winBottom >= animoffset ) { $(elem).addClass('showed'); } }); }); endTime = Date.now(); sum = endTime - startTime; console.log('loaded in: '+sum); }); 

 html { height: 100%; } body { margin: 0; height: 9000px; } .animation { display: block; width: 400px; height: 400px; background-color: blue; margin-top: 1000px; } .animation:not(:first-of-type) { margin-top: 10px; } .animation.showed { background-color: yellow; transition: all 3s ease } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <span class="animation"></span> <span class="animation"></span> <span class="animation"></span> <span class="animation"></span> 

Answer 3

IntersectionObserver在瀏覽器中的支持有限，但它正在改進。

我基本上只是在瀏覽器用戶加載我的網站時懶得加載polyfill，不支持IntersectionObserver API，代碼如下。

loadPolyfills()
   .then(() => /* Render React application now that your Polyfills are 
ready */)

/**
 * Do feature detection, to figure out which polyfills needs to be imported.
 **/

function loadPolyfills() {
  const polyfills = []

  if (!supportsIntersectionObserver()) {
    polyfills.push(import('intersection-observer'))
  }

  return Promise.all(polyfills)
}

function supportsIntersectionObserver() {
  return (
    'IntersectionObserver' in global &&
    'IntersectionObserverEntry' in global &&
    'intersectionRatio' in IntersectionObserverEntry.prototype
  )
}