Lazy loading като в Facebook
19-08-2013
В този урок ще се опитам да ви обясня как се прази 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
}

?>


*Сложил съм няколко <br>, за да може съдържанието да стига до края на страницата ( да има scrollbar ).

В <head> тага на 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
}

?>


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







/ Трябва да сте регистриран за да напишете коментар /
От: joTunkiq
13:28 08-09-2013
Добър урок, но прекалено бавен за по-старите компютри. В този случай може да се ползва единсвено едно статично php странициране или пък ако държиш на JS ползвай същия код, но не да се задейства от скролването, а от бутон. Така потребителя ще реши дали да си твари браузара с още записи или не :)
От: deam0n
14:20 08-09-2013
Да това с бутона е добра идея. В iconfinder.com е направено така с бутон или ако натиснеш space-a.
От: Revelation
0:06 10-09-2013
От целия facebook, това сигурно ми е най-досадното нещо, но няма лошо да се покаже как става (y).
От: Hous
20:59 18-09-2013
Постарал си се , браво .Ще е от полза.Според мен обаче това е неприложимо в повечето случай, защото ако сайта е "тежък" и някой скрулне доста може целия комп да забие, също зависи и с кой браузър се гледа, при някой може да даде "бъг" и да прецака като цяло сайта.

Иначе браво за урока :)
От: jooorooo
18:26 10-10-2014
Това, че забива Facebook-a си е техен проблем. Дали ще е нормално странициране или ще е инфинити скрол е все тая. Разликата е, че се увеличава съдържанието в браузера. Но при правилно написан HTML+ JS няма да има натоварване. Пример: http://pinterest.com, http://pintastic.co и много други.
1