deam0nLazy loading като в Facebook
В този урок ще се опитам да ви обясня как се прази lazy loading с jquery, php и mysql.
Правим си един тестов index.php. В него зареждаме jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>В <body> в index.php зареждаме последните 10 записа от базата от данни:
<?php
mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("db") or die(mysql_error());
$query = "SELECT * FROM table ORDER by id DESC LIMIT 10";
$result = mysql_query($query) or die(mysql_error());
while($row = mysql_fetch_array($result)) {
?>
<div style="border: 1px solid red; padding: 10px;" class="wrdLatest" id="<?=$row['id'];?>">
<?=$row['text'];?>
<Br /> <Br /> <Br /> <Br /> <Br />
</div>
<?php
}
?>*Сложил съм няколко
, за да може съдържанието да стига до края на страницата ( да има scrollbar ).
В тага на index.php слагаме следния JS ( след jquery ). Този js общо взето проверява дали страницата е заредила и дали потребителят е скролвал. Ако е скролвано зарежда функция lastAddedLiveFunc(), която взима id-то (id-то в случая съвпада с id-то на записа, който е визуализиран от дб-то) на последния визуализиран див с клас .wrdLatest и прави заявка към load.php с това id и връща резултата в #lastPostsLoader. Трябва да си намерите картинка (loader), която да се визуализира, докато се зарежда съдържанието. В случая мойта се казва bigLoader.gif .
<script type="text/javascript">
$(document).ready(function(){
function lastAddedLiveFunc()
{
$('div#lastPostsLoader').html('<img src="bigLoader.gif">');
$.post("load.php?id="+$(".wrdLatest:last").attr("id"),
function(data){
if (data != "") {
$(".wrdLatest:last").after(data);
}
$('div#lastPostsLoader').empty();
});
};
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
lastAddedLiveFunc();
}
});
});
</script>Правим файл load.php, който по 2 записа всеки път, когато е зареден.
<?php
mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("db") or die(mysql_error());
$id = (int)$_GET['id'];
$query = "SELECT * FROM gif WHERE id<$id ORDER by id DESC LIMIT 2";
$result = mysql_query($query) or die(mysql_error());
while($row = mysql_fetch_array($result)) {
?>
<?=$row['text'];?>
<Br /> <Br /> <Br /> <Br /> <Br />
</div>
<?php
}
?>От тук само трябва да скролвате надоло и съдържанието ще се визуализира, всеки път щом стигнете до края на страницата.
