Question

我想在滚动chart.html时加载<div class="loadChart">，并在第一时间加载它。

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

我使用setTimeout来控制，但我仍然遇到麻烦。这是我的代码↓

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

我如何使用jQuery＆amp; amp;的JavaScript？

Answer 1

您要做的是将窗口高度添加到滚动位置，以便在div从底部进入视口时加载内容。否则，内容只会在您滚动到内容时加载，直到触及视口的顶部。

你也不需要setTimeout，除非你出于性能原因想要实现某种频率上限（但这不是你实现它的方式）。

然后确保在加载内容后取消设置onscroll回调。（或者，如果您需要其他内容，请设置数据属性或变量，如果内容已加载并检查，以便查看是否必须触发load()。

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

首先，为什么要使用计时器？其次，不要使用固定像素值作为偏移顶部。这可能会改变，并会导致您的代码无法正常工作。使用变量

请参阅下面的代码段

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>

滚动到特定DOM时如何加载内容？

2 个答案: