Préambule
Charger du contenu externe dans une page n'a jamais été aussi simple qu'avec jQuery, vous verrez ci-dessous plusieurs méthodes pour y arriver.
Méthode simple
Je nomme ce chapitre "méthode simple" mais en fait je parle plutôt d'un chargement d'un élément externe
légé, qui ne nécessite pas de chargement avant l'affichage, par exemple un texte ou une image légère. Pour du contenu plus lourd qui nécessite un "loader" descendez au chapitre d'après.
jQuery met à notre disposition l'élément .html() qui nous permet d'importer du contenu dans un bloc sans avoir à recharger la page. Voyez ci-dessous :
CODE JAVASCRIPT
$("#test").html("
");
Typiquement ici nous pouvons ajouter du contenu html dans le bloc ayant pour id test.
Idéal pour l'affichage simple d'image ou de texte court. Le code ci-dessous affiche notre image lorsqu'on clic sur le bouton ayant pour id "bouton1".
CODE JAVASCRIPT
$("#bouton1").click( function() {
$("#test").html("");
});
Ok c'est intéressant pour du texte court ou une simple petite image, mais cette méthode risque de devenir rapidement compliquée si nous devons charger un grand texte ou des images pesant assez lourd.
C'est pour cela que nous utiliserons la méthode .load().
Premiers pas avec load()
Dans cette partie nous allons apprendre à charger des pages externes dans un bloc div.
Dans le chapitre suivant nous verrons du coté des images lourdes avec un message pour faire patienter le visiteur.
La méthode proposée par jQuery est d'une simplicité enfantine, merci jQuery.
load() va nous permettre de charger une image ou une page dans un bloc défini.
Dans l'exemple ci-dessous nous chargeons une page entière dans un div ayant pour id "test".
CODE HTML
<div id="test"></div>
CODE JAVASCRIPT
$("#bouton1").click( function() {
$('#test').load('test.htm');
});
Nous pouvons ajouté un callback à cette fonction, dans l'exemple ci-dessous nous affichons un message lorsque la page est chargée.
CODE HTML
<div id="test"></div>
CODE JAVASCRIPT
$("#bouton1").click( function() {
$('#test').load('test.htm', function() {
alert('Page chargée avec succès.');
});
});
Il est possible d'afficher un élément particulier d'une page.
Si vous désirez charger uniquement une partie précise d'une page et pas la page en entier vous pouvez procéder comme ceci :
CODE HTML
<div id="test"></div>
CODE JAVASCRIPT
$("#bouton1").click( function() {
$('#test').load('test.htm #block');
});
Nous chargeons uniquement le bloc ayant pour id "block" dans la page test.htm. Ce bloc nous l'affichons dans notre div ayant l'id "test".
Chargement d'une image avec load()
Nous allons voir ici comment charger une image avec load(), la méthode est légèrement différente, cependant nous allons y intégrer un message spécifique pour faire patienter le visiteur.
Dans cette optique nous avons besoin de plusieurs autres éléments html dans notre page, à savoir un bloc div qui contiendra le message pour faire patienter le visiteur et le bloc div qui affichera l'image. A noter que nous pourrions utiliser le même bloc div car le contenu sera remplacer.
CODE HTML
<button id="bouton1">Cliquez ici</button>
<div id="chargement">CHARGEMENT EN COURS ...</div>
<div id="test"></div>
CODE CSS
/* Au chargement de la page le bloc chargement doit être caché */
#chargement
{
display:none;
}
CODE JAVASCRIPT
$("#bouton1").click( function() { // Lorsqu'on clic sur bouton1
$("#chargement").css({"display":"block"}); // On affiche le message pour faire patienter le visiteur
/* ici nous importons une nouvelle image en javascript avec new Image(); */
var image = "full.jpg";
var photo = new Image();
photo.src = image;
/* Tant que photo n'est pas chargée nous n'exécutons pas la fonction */
$(photo).load(function() {
/* photo est chargée nous pouvons exécuter la fonction */
$("#chargement").css({"display":"none"}); // On cache le message d'attente.
$("#test").html("
"); // On affiche l'image dans notre div "test"
});
});
Avec ces quelques lignes nous pouvons créer facilement plein de choses intéressantes comme une pagination à onglets, une galerie d'images dynamiques etc.
Toutes ces méthodes sont exploités dans notre démo en ligne.
Afficher le code source de la page ou télécharger le fichier zip que nous mettons à votre disposition.
En espérant que ces quelques lignes puissent vous aidez à dynamiser à peu plus votre site.
Sondage du mois
La connaissance ne vaut que si elle est partagée par tous
Utilisateurs en ligne
Administrateur - Newsers - Rédacteurs - VIP - Membres - Bots
Anniversaire du jour
Amis en ligne (0)
La bifle - Extrait
