javascript - 将多个元素放入一个 jQuery 滚动显示函数中

Question

我有一个网页，它使用 jQuery 库scrollreveal 在加载窗口时缓慢显示页面上的各种 html 元素。

代码现在可以正常工作。但初次加载页面时响应有点慢。我认为这是因为我正在运行多个 sr.reveal() 函数。我尝试将元素放入三个或四个具有持续时间和起源属性的独立函数中，但这不起作用。

我想缩短代码，以便来自顶部/底部/左侧且具有相同持续时间的所有元素都放置在同一函数中。本质上，我想缩短我的代码。

jQuery 源代码:

<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
    <script>
      window.sr = ScrollReveal();
      sr.reveal('h1', {
        duration: 1500,
        origin: 'top'
      });

      sr.reveal('.icons', {
        duration: 3500,
        origin: 'left'
      });

      sr.reveal('#email-link1', {
        duration: 1000,
        origin: 'bottom'
      });

      sr.reveal('#cv-link', {
        duration: 1000,
        origin: 'bottom'
      });

      sr.reveal('#tel-link', {
        duration: 1000,
        origin: 'bottom'
      });

      sr.reveal('p', {
        duration: 1000,
        origin: 'bottom'
      });

      sr.reveal('h2', {
        duration: 1000,
        origin: 'top'
      });

      sr.reveal('h3', {
        duration: 1000,
        origin: 'top'
      });

      sr.reveal('.back-to-top', {
        duration: 1000,
        origin: 'top'
      });

      sr.reveal('.email-link2', {
        duration: 1000,
        origin: 'bottom'
      });

      sr.reveal('.tel-link2', {
        duration: 1000,
        origin: 'bottom'
      });

    </script>

我尝试这样做:

sr.reveal('h2', 'h3', {} ...等)

但是代码没有运行。任何帮助将非常感谢。

Answer 1

我认为这会大大缩短它。您需要将其余数据添加到数组中。这尚未经过测试。

window.sr = ScrollReveal();    

var revealers = [
    ['h1', 1500, 'top'],
    ['.icons', 3500, 'top']
];

for(var i = 0; i < revealers.length; i++) {
    sr.reveal(revealers[i][0], {
        duration: revealers[i][1],
        origin: revealers[i][2]
    });
}

如果您愿意，您可以将所有内容都放入一个函数中。这使它看起来更好。

编辑:

作为可重用性的函数:

function revealMe(revealerArray, scrollReveal) {
    for(var i = 0; i < revealerArray.length; i++) {
        sr.reveal(revealerArray[i][0], {
            duration: revealerArray[i][1],
            origin: revealerArray[i][2]
        });
    }
}

在不同的地方:

window.sr = ScrollReveal(); 

var revealers = [
    ['h1', 1500, 'top'],
    ['.icons', 3500, 'top']
];

revealMe(revealers, sr);