Question

我遵循无限加载的教程。我管理了这段代码，但背景只是一次又一次地加载。我想只显示一次我的内容。有人可以帮我吗？这是代码。

<!DOCTYPE html>
<html>
<head>
 <script type="text/javascript">
 function yHandler(){
// Watch video for line by line explanation of the code
// http://www.youtube.com/watch?v=eziREnZPml4
var wrap = document.getElementById('wrap');
var contentHeight = wrap.offsetHeight;
var yOffset = window.pageYOffset; 
var y = yOffset + window.innerHeight;
if(y >= contentHeight){
    // Ajax call to get more dynamic data goes here
    wrap.innerHTML += '<div class="newData"></div>';
}
var status = document.getElementById('status');
status.innerHTML = contentHeight+" | "+y;
 }
 window.onscroll = yHandler;
 </script>
 <style type="text/css">
 div#status{position:fixed; font-size:24px;}
 div#wrap{width:800px; margin:0px auto;}
 div.newData{height:1000px; background:#09F; margin:10px 0px;}
 </style>
 </head>
 <body> 
 <div id="status">0 | 0</div>
 <div id="wrap"><img src="http://images.bwwstatic.com/tvnetworklogos/1470470F-930B-5791-2D55F77DC33EBA96.jpg"></div>
 </body>
 </html>

Answer 1

通过将window.onscroll设置为null，您基本上会有一次“fire once”事件。

<script type="text/javascript">
function yHandler(){
var wrap = document.getElementById('wrap');
var contentHeight = wrap.offsetHeight;
var yOffset = window.pageYOffset; 
var y = yOffset + window.innerHeight;
if(y >= contentHeight){
    // Ajax call to get more dynamic data goes here
    wrap.innerHTML += '<div class="newData"></div>';
    window.onscroll = null;
}
var status = document.getElementById('status');
status.innerHTML = contentHeight+" | "+y;
 }
 window.onscroll = yHandler;
</script>

无限加载

1 个答案: