Question

我在dom树中有很多对象，当我们在视口中出现时，我正在添加新类。但是我的代码非常慢 - 它导致页面变慢...

我有这样的dom：

add_action( 'rss_tag_pre', function( $tag )
{
    if( 'rss2' === $tag )
        ob_start();
} );

add_action( 'rss2_head', function()
{       
    echo str_replace( '<link>', '<link rel="nofollow">',  ob_get_clean() );
} );

和这样的jquery：

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

也许我可以以某种方式加快我的滚动检查和课堂申请？

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在浏览器中的支持有限，但它正在改进。

只有在浏览器用户加载我的网站并且不支持带有代码的IntersectionObserver API时，我才基本上懒得加载polyfill。

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

检查元素何时出现在视口中 - ＆gt; addClass

3 个答案: