ビューポートでdivをロードする必要があります

Question

CSSでアニメーションパーセンテージバーを作成しました。ビューポートがコンテナdivに到達するまでアニメーションの読み込みを遅らせたいと思います。私はGoogleで見つけることができるすべてのlazyload jqueryスクリプトを試しても、私は必要なものを行うために1つを得ることができません。私は怠惰な負荷に必要なコンテンツがあなたの要素は、ビューポートであるかどうかを確認するために、この方法を試すことができます

<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

列divの内側にある、 はまた、あなたはとても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)); 
}