11548 sujets

JavaScript, DOM et API Web HTML5

Chargement d'une page au fur et à mesure

Bonjour

Je n'ai pas trouvé de sujet identique au mien (mais je n'utilise peut être pas les bons mots clés) donc j'espère qu'on ne me jettera pas la pierre s'il a déjà été abordé Smiley confus

Je cherche un script qui me permettrait de ne charger, ou au moins de n'afficher le contenu d'une page qu'au fur et à mesure que le scrolling se fait, un peu comme sur facebook sur la page d'accueil pour les news.

J'espère avoir été à peu près claire, merci d'avance pour toute réponse.

Lu
Salut...
Pour ma part je prendrai la piste : comparaison du offset d'un élément avec le scroll de la page + chargement AJAX...
Tu aurais un lien de documentation pour faire ce dont tu me parles ? (et que je ne connais pas du tout j'en ai peur Smiley decu )

Merci

Lu
Je n'ai pas de lien malheureusement, mais je sais que cela est possible en JQuery... en cherchant un peu et avec beaucoup de courage peut être que ... Smiley lol
Bah ecoutes, j'ai trouvé que c'etait un exercice sympa à faire, donc j'ai écrit un ptit script Smiley smile 

$(document).ready(function(){
	$(window).scroll(function(){
		checkOffsetAndLoad();
	});
	checkOffsetAndLoad();
	
	
	});
	
var linksLoaded = false;
var commentsLoaded = false;

function checkOffsetAndLoad(){
	//$("#links, #comments").clearQueue();	
	var scrollTop = $(window).height() + $(window).scrollTop();
	var linksTop = $('#links').position().top +200 ; // +200 only in dev mode to see if the script works ! To Remove in PROD
	var commentsTop = $('#comments').position().top +100 ; // + 100 only in dev mode to see if the script works ! To Remove in PROD
	if(scrollTop > linksTop && !linksLoaded){
		//SHOULD BE DONE > Add loading img + ajax call 
		/*
		$('#links').append("<div class='ajax'><img src='images/loading.gif' alt='loading...'/></div>");	
		$('#links').find('.ajax').load('links.html');
		*/
		$('#links').append("<ul><li><a href='#'>Link 1</a></li><li><a href='#'>Link 2</a></li><li><a href='#'>Link 3</a></li></ul>");
		$('#links').css({'min-height':'0'});
		linksLoaded = true;
	}
	if(scrollTop > commentsTop && !commentsLoaded){
		//SHOULD BE DONE > Add loading img + ajax call 
		/*
		$('#comments').append("<div class='ajax'><img src='images/loading.gif' alt='loading...'/></div>");	
		$('#comments').find('.ajax').load('comments.html');
		*/
		$('#comments').append("<ul><li><a href='#'>Comment 1</a></li><li><a href='#'>Comment 2</a></li><li><a href='#'>Comment 3</a></li></ul>");
		$('#comments').css({'min-height':'0'});
		commentsLoaded = true;
	}
	
}


Ce code charge une div#links et #comments selon la taille de la fenetre et la position de la scrollbar... (en utilisant la syntaxe jquery Smiley smile )
Modifié par spiral123 (26 Apr 2011 - 16:29)
Woa tu m'impressionnes !
Par contre il n'a pas l'air de fonctionner chez moi, ou je l'ai mal utilisé ce qui est fort probable aussi.

Lu
Il faut que tu aies une <div id='links'> et une <div id='comments'> dans ton code HTML.
Après c'est censé marcher tout seul!

(Et d'inclure jquery dans ta page....)
Modifié par spiral123 (26 Apr 2011 - 16:46)
Aucun problème de mon coté...
Si tu peux fournir un lien, ce sera plus facile pour t'aider.

(Tu as une erreur js dans ta console avec le script que j'ai écrit ?)
Okay... Donc c'est une ptite erreur de mon script...
Essayes en remplacant les
.position().top
par
.offset().top

Pour info voici le script final avec vrai chargement AJAX : 

$(document).ready(function(){
	$(window).scroll(function(){
		checkOffsetAndLoad();
	});
	checkOffsetAndLoad();
	$('.noJs').css({display:'none'});
});
	
var linksLoaded = false;
var commentsLoaded = false;

function checkOffsetAndLoad(){
	if(linksLoaded && commentsLoaded){
		$(window).unbind('scroll');
		return;
	}
	$("#links, #comments").clearQueue();	
	var scrollTop = $(window).height() + $(window).scrollTop();
	var linksTop = $('#links').offset().top +200 ; // +200 only in dev mode to see if the script works ! To Remove in PROD
	var commentsTop = $('#comments').offset().top +100 ; // + 100 only in dev mode to see if the script works ! To Remove in PROD
	if(scrollTop > linksTop && !linksLoaded){
		linksLoaded = true;
		$('#links').append("<div class='ajax'><img src='images/loading.gif' alt='loading...'/></div>");	
		$('#links').find('.ajax').load('links.html', function(){
				$('#links').css({'min-height':'0'});
			});
		
	}
	if(scrollTop > commentsTop && !commentsLoaded){
		commentsLoaded = true;
		$('#comments').append("<div class='ajax'><img src='images/loading.gif' alt='loading...'/></div>");	
		$('#comments').find('.ajax').load('comments.html', function(){
				$('#comments').css({'min-height':'0'});
			});
		
		
	}
	
}
Ca n'a pas l'air de fonctionner davantage.. Je ne sais pas ce qu'est censé faire ton code en fait mais sur ma page de test, le comportement reste normal

Lu
Coucou !

Je suis intéressé par votre sujet... Finalement, aviez-vous trouvé une piste ?


Je cherche un système comparable, pour charger des div au fur et à mesure d'un scroll, comme on peu les trouver sur un Chrome Web Store...

Bien à vous
Modifié par Olivier C (29 Jan 2012 - 09:17)
Sujet clos
Aller à