implémentation d'un Infinite scroll
Bonjour tout le monde,
Je vous contacte parce que depuis plusieurs jours je me démène pour réussir un effet d'"infinite scroll" sur mon site web, mais sans succès.
(l'infinite scroll, pour ceux qui ne voient pas ce que c'est : http://www.webresourcesdepot.com/dnspinger/).
Normalement, cela se réalise grâce à 2 fonctions JS, qui sont les suivantes:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| function lastPostFunc()
{
$('div#lastPostsLoader').html('<img src="images/loading.gif">');
$.post("scroll.asp?action=getLastPosts&lastID=" + $(".wrdLatest:last" ).attr("id" ),
function(data){
alert(data);
if (data != "" ) {
$(".wrdLatest:last" ).after(data);
}
$('div#lastPostsLoader').empty();
});
};
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
lastPostFunc();
}
});
}); |
J'ai également adapté mes div en les écrivant de cette manière:
Code:
<div class="wrdLatest" id=9>
Pourtant rien à faire, la fonction se lance bien (du moins, la première et la dernière, celle qui est contenue dans la fonction "LastPostFunc()" ne se lance pas, je ne comprends pas pourquoi), et le nouveau contenu n'arrive jamais, la fonction se contentant de charger l'image prédéfinie une fois qu'elle est arrivée en bas de la page.
Je suis débutant en Javascript, soyez indulgents :)
Merci d'avance!
