如果声明

Question

以下代码在单击底部按钮时最初会加载更多内容，但是当滚动到达页面底部时我需要它才能工作...我已经尝试了在这里的代码//这里是问题/ /但似乎没有用......任何想法？

var lazyload = lazyload || {};

(function($, lazyload) {

    "use strict";

    var page = 2,
        buttonId = "#button-more",
        loadingId = "#loading-div",
        container = "#container";
		
		//HERE IS THE PROBLEM
$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
	    
    lazyload.load = function() {

        var url = "./" + page + ".html";

        $(buttonId).hide();
        $(loadingId).show();

        $.ajax({
            url: url,
            success: function(response) {
                if (!response || response.trim() == "NONE") {
                    $(buttonId).fadeOut();
                    $(loadingId).text("No more entries to load!");
                    return;
                }
                appendContests(response);
            },
            error: function(response) {
                $(loadingId).text("Sorry, there was some error with the request. Please refresh the page.");
            }
        });
    };
}
});
    var appendContests = function(response) {
        var id = $(buttonId);

        $(buttonId).show();
        $(loadingId).hide();

        $(response).appendTo($(container));
        page += 1;
    };

})(jQuery, lazyload);

body{
    background-color: #ccc;
    margin: 0;
}
#wrapper{
	width:100%;
    margin: 0 auto;
    min-height: 500px;
    background-color: #e9e9e9;
    color: #333;
    padding: 10px;
    text-align: center;
}

#data-container{
    margin: 10px;
}

#data-container .data-item{
    background-color: #444444;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 105px;
    margin: 5px;
    color: #fff;
}

#loading-div{
    display: none;
}

#button-more{
    cursor: pointer;
    margin: 0 auto;
    background-color: #aeaeae;
    color: #fff;
    width: 200px;
    height: 50px;
    line-height: 50px;
}
.child{
	width:100%;
	height:1000px;
	background-color:blue;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
            <h1>Lazy Load Demo</h1>
            <div id="container">
                <div class="child">
                </div>
            </div>
            <div id="button-more" onclick="lazyload.load()">
                Load more items
            </div>
            <div id="loading-div">
                loading more items
            </div>
        </div>

Answer 1

let more = document.querySelector("button");
let show = document.querySelector(".show");
let loading = document.querySelector(".loading");
let bottom = document.querySelector(".bottom");
let allowAjax = true;


function getAjax(){
	loading.classList.add("show");

  if(allowAjax === true){
		
		allowAjax = false;
		
		let xhttp = new XMLHttpRequest();
		xhttp.onreadystatechange = function() {
			if (this.readyState == 4 && this.status == 200) {
				let back = xhttp.response;
				back = JSON.parse(back);
				let imgSrc = back.results[0].picture.large;

				let imgEl = document.createElement("img");
				imgEl.src = imgSrc;
				show.appendChild(imgEl);
				loading.classList.remove("show");
				allowAjax = true;

			}
		};
		xhttp.open("GET", "https://randomuser.me/api/", true);
		xhttp.send();
		
	}
	
	
}

window.addEventListener("scroll",function(){
	
	let scrollPos = window.pageYOffset;
	let bottomPos = bottom.offsetTop;
	
	if(bottomPos / 1.5 <= scrollPos){
		
		// Almost to the bottom of the page
		getAjax();
		
	}
	
});


more.addEventListener("click",function(){
	
	getAjax();

});

img{
  
  display: block;
	width: 30em;
	height: 30em;
  
}

.more{
  
  position: fixed;
  top: 1em;
  right: 5em;
  background: skyblue;
  color: #FFF;
  padding: 0.5em;
  border: none;
  cursor: pointer;
  outline: none;
}

.loading{
	width: 10em;
	height: 10em;
	display: none;
	position: fixed;
	top: 5em;
	right: 1em;
	background: #212323;
	padding: 0.5em;
}

.loading.show{
	display: block;
}

.show img{
	
	display: block;
	width: 30em;
	height: 30em;
	
}

<img src="https://unsplash.it/300/300/?random" />
<img src="https://unsplash.it/300/300/?random" />


<img src="https://unsplash.it/300/300/?random" />
<img src="https://unsplash.it/300/300/?random" />

<div class="show"></div>
<div class="bottom"></div>
<button class="more">More</button>



<img src="http://www.lettersmarket.com/uploads/lettersmarket/blog/loaders/common_metal/ajax_loader_metal_512.gif"class="loading">

最初加载