forked from qwerty/tupali
93 lines
3.0 KiB
PHP
93 lines
3.0 KiB
PHP
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title>Test Image</title>
|
|
|
|
<script src="jquery/jquery-2.1.4.min.js" ></script>
|
|
<script src="bootstrap/js/bootstrap.min.js" ></script>
|
|
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css?" >
|
|
<script src="lazy/jquery.lazy.min.js"></script>
|
|
<style type="text/css">
|
|
img.lazy {
|
|
|
|
|
|
/* optional way, set loading as background */
|
|
background-image: url('../milfs/images/loading.gif');
|
|
background-repeat: no-repeat;
|
|
background-position: 50% 50%;
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
$(document).ready(function () {
|
|
|
|
loadArticle(1);
|
|
loadArticle(2);
|
|
loadArticle(3);
|
|
var count = 4;
|
|
$("div").scroll(function () {
|
|
var offset = $('#scroll-content div').length;
|
|
var $this = $(this);
|
|
var height = this.scrollHeight - $this.height(); // Get the height of the div
|
|
var scroll = $this.scrollTop(); // Get the vertical scroll position
|
|
|
|
var isScrolledToEnd = (scroll >= height);
|
|
|
|
$(".scroll-pos").text(scroll);
|
|
$(".scroll-height").text(height);
|
|
|
|
if (isScrolledToEnd) {
|
|
loadArticle(count);
|
|
count++;
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
function loadArticle(pageNumber){
|
|
|
|
var newDiv = document.createElement("div");
|
|
// newDiv.setAttribute("class", "container");
|
|
// var contenido ="Hola mundo "+ pageNumber;
|
|
// newDiv.innerHTML = contenido;
|
|
|
|
//newDiv.innerHTML.append(html);
|
|
document.getElementById("scroll-content").appendChild(newDiv);
|
|
|
|
$.ajax({
|
|
//url: 'get-post.php?variable='+(offset),
|
|
url: '../milfs/api.php?id=74&tipo=simple&formato=li&plantilla=landingpage®istros=1&pagina='+pageNumber,
|
|
type:'POST',
|
|
dataType: 'html',
|
|
success: function(html) {
|
|
// $('#scroll-contentx').append(html);
|
|
var contenido = html;
|
|
newDiv.innerHTML = contenido;
|
|
}
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
$(function() {
|
|
$('.lazy').lazy({
|
|
appendScroll: $('#scroll-content')
|
|
});
|
|
});
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class='container' style="overflow-y: scroll; overflow-x: hidden; height: 400px; border: 1px solid red;">
|
|
|
|
|
|
<div id="scroll-content">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<div id='paginas'>las paginas</div>
|
|
Scroll Height: <span class="scroll-height"></span> <br/>
|
|
Scroll position: <span class="scroll-pos"></span>
|
|
</body>
|
|
</html>
|
|
shareimprove this answer |