How can I load something when I scroll to specific DOM?

Question

I want to load chart.html when I scroll the <div class="loadChart"> , and load it at the first time.

var loadChart = $('.loadChart').offset().top;
console.log(loadChart); //loadChart top is 1532

I use the setTimeout to control, But I still have trouble. This is my code↓

var timer;
window.onscroll = function(){
  var scrollPos = $(document).scrollTop(); 
  if(scrollPos>=1532){
            window.clearTimeout(timer);
            timer = window.setTimeout(function() {
                $('.loadChart').load('chart.html');
            }, 1000);
   }
}

How can I do it with jQuery & JavaScript?

Answer 1

What you'll want to do is add your window height to the scroll position, so that the content loads as soon as the div enters the viewport from the bottom. Otherwise, the content would only load as soon as you scrolled it so far that it touches the top of the viewport.

You also don't need the setTimeout unless you want to implement some sort of frequency capping for performance reasons (but that was not the way you implemented it).

Then make sure that you unset the onscroll callback once that the content has been loaded. (Alternatively, if you need it for other stuff, set a data attribute or a variable if the content has been loaded and check for that in order to see whether the load() has to be triggered or not.

 var loadChart = $('.loadChart'), loadChartTop = $('.loadChart').offset().top; window.onscroll = function(){ var scrollPos = $(document).scrollTop(); if(scrollPos + window.innerHeight >=loadChartTop){ console.log("would load now!"); loadChart.load('chart.html'); // remove onscroll callback window.onscroll = null; } } 

 .loadChart { background: red; text-align: center; color: #ffffff; height: 500px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> other content<br> other content<br> other content<br> other content<br> other content<br> other content<br> other content<br> other content<br> other content<br> other content<br> other content<br> other content<br> other content<br> other content<br> other content<br> other content<br> other content<br> other content<br> other content<br> other content<br> other content<br> other content<br> other content<br> other content<br> other content<br> other content<br> other content<br> other content<br> other content<br> other content<br> other content<br> other content<br> other content<br> other content<br> <div class="loadChart"> chart will be here! </div> 

Answer 2

First, why use timer ? Second, do not use a fixed pixel value for the offset top. That may change and will cause your code not to work properly. Use a variable

See snippet below

 var offTop = $('.loadChart').offset().top $(window).on("scroll",function() { var scrollPos = $(this).scrollTop() if ( scrollPos > offTop) { $(".loadChart").load("yourpagehere") } }) 

 .loadChart { height:200px; margin-top:100px; background:red; } .bottom { height:800px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="loadChart"> Load Chart here </div> <div class="bottom"> </div>