Question

我在css中构建了一个动画百分比栏，我想延迟动画的加载，直到视口到达容器div。我已经尝试了我可以在谷歌上找到的每个lazyload jquery脚本，但仍然无法得到一个我需要的东西。我需要延迟加载的内容在列div

中

<section class="parallax-container2">
<img class="responsive-img parallax2" src="images/image2.jpg">
<div class="container">
<div class="row fadeInParagraph">
<div class="col s12 m6 l6 index">
<div class="progresscss"><div id="progressbar"><span class="text">89%
</span><div id="progress" ></div></div><div class="line"></div></div>
<div class="progresscss1"><div id="progressbar1"><span class="text">74%
</span><div id="progress1" ></div></div><div class="line"></div></div>
<div class="progresscss2"><div id="progressbar2"><span class="text">61%
</span><div id="progress2" ></div></div><div class="line"></div></div>
<div class="progresscss3"><div id="progressbar3"><span class="text">85%
</span><div id="progress3" ></div></div><div class="line"></div></div>
</div></div></section>

Answer 1

您可以尝试使用此方法检查您的元素是否在视口中，你还需要在滚动事件中触发它，可能正在使用setTimout，因此它不会触发太多次。

isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

需要在视口上加载div

1 个答案: