Notwendigkeit, div auf Ansichtsfenster zu laden

Question

Ich baute eine animierte Prozentsatzleiste in CSS und ich möchte die Last der Animation verzögern, bis das Ansichtsfenster das Behälterdiv erreicht. Ich habe jedes LazyLoad JQuery-Skript ausprobiert, das ich bei Google finden kann und kann immer noch nicht das tun, was ich brauche. Der Inhalt ich zu faul Last benötigen, ist im Inneren der Säule 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

Sie versuchen, diese Methode kann zu überprüfen, ob Ihr Element in Viewport ist, Auch müssen Sie es auf Scroll-Ereignis ausgelöst, kann unter Verwendung von setTimout so dass es nicht zu oft feuert.

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