无限加载答案

【问题标题】：Infinite loading无限加载
【发布时间】：2014-04-13 17:36:30
【问题描述】：

我按照教程进行了无限加载。我管理了这段代码，但背景只是一次又一次地加载。我只想显示我的内容一次。任何人都可以帮助我吗？这是代码。

<!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>

【问题讨论】：

我不确定你的意思，你想要无限加载吗？如果你只做一次，一个简单的布尔标志就可以解决这个问题。

标签： html loading infinite

【解决方案1】：

通过将 window.onscroll 设置为 null，您实际上有一个“触发一次”事件。

<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>

【讨论】：