php mysql уроци

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

?>

От тук само трябва да скролвате надоло и съдържанието ще се визуализира, всеки път щом стигнете до края на страницата.

Вашият коментар