tupali/librerias/infinite.php

93 lines
3.0 KiB
PHP
Raw Normal View History

2017-11-06 16:23:43 +00:00
<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>
2017-11-06 16:49:07 +00:00
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css?" >
2017-11-06 20:16:48 +00:00
<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>
2017-11-06 21:29:33 +00:00
<script type="text/javascript">
2017-11-06 16:23:43 +00:00
$(document).ready(function () {
2017-11-06 17:59:58 +00:00
loadArticle(1);
loadArticle(2);
loadArticle(3);
var count = 4;
2017-11-06 16:23:43 +00:00
$("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++;
}
2017-11-06 17:59:58 +00:00
});
});
function loadArticle(pageNumber){
2017-11-06 16:23:43 +00:00
var newDiv = document.createElement("div");
2017-11-06 21:29:33 +00:00
// newDiv.setAttribute("class", "container");
2017-11-06 16:23:43 +00:00
// 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),
2017-11-06 20:26:19 +00:00
url: '../milfs/api.php?id=74&tipo=simple&formato=li&plantilla=landingpage&registros=1&pagina='+pageNumber,
2017-11-06 16:23:43 +00:00
type:'POST',
dataType: 'html',
success: function(html) {
// $('#scroll-contentx').append(html);
var contenido = html;
newDiv.innerHTML = contenido;
}
});
2017-11-06 17:59:58 +00:00
}
2017-11-06 20:16:48 +00:00
$(function() {
$('.lazy').lazy({
appendScroll: $('#scroll-content')
});
});
2017-11-06 16:23:43 +00:00
</script>
</head>
<body>
2017-11-06 16:49:07 +00:00
<div class='container' style="overflow-y: scroll; overflow-x: hidden; height: 400px; border: 1px solid red;">
2017-11-06 17:59:58 +00:00
2017-11-06 21:29:33 +00:00
2017-11-06 16:23:43 +00:00
<div id="scroll-content">
2017-11-06 21:29:33 +00:00
2017-11-06 16:23:43 +00:00
</div>
2017-11-06 21:29:33 +00:00
2017-11-06 16:23:43 +00:00
</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