Chargement progressif des pages dans jquery. Amélioration du défilement infini. Chargement de données externes

D'aussi loin que je me souvienne, les développeurs Web se sont toujours tournés vers la bonne vieille pagination lorsqu'ils avaient besoin d'afficher grand nombre contenu. Ne vous méprenez pas, la pagination reste un moyen efficace d'afficher du contenu, mais dans cet article, nous parlerons d'une approche différente : le défilement paresseux, également connu sous le nom de « défilement paresseux ». défilement infini» et « refus de pagination ». Grâce à cette technique, le contenu est chargé depuis en utilisant AJAX lorsque l'utilisateur fait défiler jusqu'au point où se termine le contenu chargé. Défilement paresseux utilisé par certains géants de l'Internet tels que Facebook et Pinterest. Dans cet article, nous allons essayer d'implémenter notre propre plugin pour chargement paresseux sur jQuery.

Avantages et inconvénients

Les avantages de cette méthode sont évidents. Afin d'obtenir une partie supplémentaire du contenu, vous n'avez pas besoin d'aller sur une autre page, ce qui perturbe également votre attention et vous oblige à regarder une autre zone de la page. En ajoutant la fonctionnalité de chargement paresseux, vous gardez l'attention de l'utilisateur sur la même zone pendant la lecture.

Le chargement paresseux n’est pas efficace dans toutes les situations. Par exemple, dans les cas où un utilisateur suit un lien et souhaite ensuite revenir à page précédente en utilisant l'historique du navigateur, il perd sa position dans la partie chargée via AJAX. Une façon de résoudre problème similaire- ouvrez tous les liens dans une nouvelle fenêtre ou un nouvel onglet.

De plus, avant de décider d'utiliser cette technologie, sachez que moteurs de recherche ne sont pas très favorables à de telles décisions. Pour éviter le problème de la visibilité du contenu par les moteurs de recherche, assurez-vous de pouvoir proposer une alternative avec une pagination ou un plan du site.

Commençons

Commençons par dessiner une page très simple. Les parties les plus importantes de la page sont affichées dans le code ci-dessous. Dossiers complets peut être consulté dans les sources.

HTML

Bonjour! Je suis le premier élément Bonjour ! Je suis le deuxième élément Bonjour ! Je suis le troisième élément Donc ça devient ennuyeux... Essayons quelque chose de nouveau Que diriez-vous de charger plus d'éléments via AJAX Cliquez sur le bouton ci-dessous pour télécharger plus d'éléments chargement en cours de chargement d'éléments supplémentaires

CSS

#data-container ( marge : 10px ; ) #data-container .data-item ( background-color : #444444 ; border-radius : 5px ; -moz-border-radius : 5px ; -webkit-border-radius : 5px ; remplissage : 5px ; marge : 5px ; couleur : #fff ; ) #loading-div ( affichage : aucun ; ) #button-more( curseur : pointeur ; marge : 0 auto ; couleur d'arrière-plan : #aeaeae ; couleur : #fff ; largeur : 200 px ; hauteur : 50 px ; hauteur de ligne : 50 px)

Notes clés

Si vous regardez de plus près le document que nous avons créé, vous verrez que de nouveaux messages seront chargés lorsque vous cliquerez sur le bouton « charger plus ». Voici les points que nous mettrons en œuvre :

• nous devons faire une requête à l'URL, qui nous renverra une liste d'éléments qu'il faudra insérer sur la page
• ce processus doit être répété à chaque fois que vous cliquez sur le bouton, mais de nouveaux messages doivent alors être renvoyés
• de nouveaux messages doivent être publiés pour chaque demande tant qu'il y a quelque chose à retourner
• lorsqu'il n'y a plus de messages, il est nécessaire d'informer l'utilisateur qu'il a atteint la fin

Modèles de réponse AJAX

Idéalement, nous devons déclarer une variable dans laquelle nous stockerons le numéro de page, et utiliser ce numéro pour déterminer l'URL à laquelle nous enverrons la requête. Dans notre démo, nous aurons trois de ces pages : 2.html, 3.html et page blanche 4.html.

Lorsque vous cliquez sur le bouton de téléchargement partie suivante données, un certain temps s'écoule entre le moment où la demande est envoyée et la réponse est reçue. Dans ce cas, nous masquerons le bouton de téléchargement et afficherons à la place un texte indiquant que chargementéléments :

Ajouter les données reçues à la page

Tout d'abord, annulons les modifications que nous avons apportées pendant que la requête était encore en cours d'exécution, c'est-à-dire afficher le bouton « charger plus » et masquer le texte d'information. Deuxièmement, vous devez insérer les données reçues sur la page, après les éléments qui se trouvent déjà sur la page. Notez que par souci de simplicité, dans cet exemple, nous obtenons Données HTML immédiatement à la suite de la demande. Vous pouvez envoyer une réponse à Format JSON, en y ajoutant des variables supplémentaires, telles que le statut ou le message. Le code de débit de données est indiqué ci-dessous :

$(buttonId).show(); $(loadingId).hide(); $(response).appendTo($(conteneur)); page += 1 ;

Traitement de l'option lorsque les données sont épuisées

Une fois que vous avez atteint le dernier message, vous devez montrer à l’utilisateur qu’il n’y a plus de message. Cela peut être fait de diverses manières. Vous pouvez envoyer le statut sous forme de code intégré ou de message dans la réponse. Puisque nous utilisons directement Balisage HTML dans cet exemple, une réponse vide dans notre cas indiquera que les données sont épuisées.

$.ajax(( ... success: function(response) ( // Action si la réponse est vide if (response.trim() == "") ( $(buttonId).fadeOut(); $(loadingId).text ( "Plus d'entrées à charger!"); return; // Si la réponse est correcte), ... ));

Conclusion

Dans cette démo, nous avons fourni une implémentation très basique du chargement paresseux. Bien sûr, vous pouvez faire bien mieux si vous essayez. Pour commencer, vous pouvez supprimer complètement le bouton et envoyer une demande lorsque l'utilisateur fait défiler vers le bas de la page. Cela évitera à l'utilisateur d'avoir besoin d'appuyer davantage sur un bouton et accélérera généralement le processus de visualisation des informations. Deuxièmement, vous pouvez simplement envoyer des données brutes au format JSON et créer le balisage à la volée en utilisant jQuery, par exemple :

$.each(response.items, function(index, value) ( ​​​​$("", ( "class" : "data-item", "text" : value )); ));

Enfin, la réponse JSON peut contenir un message indiquant si la requête a réussi ; données; ainsi que des informations indiquant s'il y a d'autres articles à télécharger. DANS dans ce cas c'est plus moyen efficace envoyer le résultat.

Bac à sable

recruter 9 février 2013 à 21h42 Faites-moi tourner complètement. Mise en page réactive avec défilement infini

• Placard *

Il n'y a pas longtemps, j'ai rencontré un problème :
- Mise en page mise en page adaptative. Lors du redimensionnement d'une fenêtre, les éléments de la page sont redimensionnés selon une certaine largeur. Si la largeur est inférieure au minimum, le nombre d'éléments dans la ligne devient plus petit, tout en remplissant tout l'écran en largeur. Le sens est clair - la page doit être consultée sur n'importe quel moniteur, incl. sur les appareils mobiles.
- Le contenu est chargé lors du défilement de la page, donc seule une partie du contenu est affichée, le reste est chargé lorsque vous faites défiler vers le bas (analogue à un mur VK).
- L'apparition des éléments sur la page se fait tour à tour, avec une augmentation progressive de la transparence de chaque élément. Une fois que le premier élément est devenu opaque, l'effet est appliqué à élément suivant... et ainsi de suite pour tout le monde.

Je n’ai pas trouvé de solution toute faite ; j’ai dû tout écrire à partir de zéro. Peut-être que toute cette fonctionnalité est inutile, mais si tout à coup elle s'avère utile à quelqu'un, utilisez-la, testez-la, profitez-en :

HTML. Pour les tests, j’ai rapidement mis en place une mise en page très simple. Afin de ne pas m'embêter avec les styles pendant longtemps, j'ai connecté le bootstrap. Voici le balisage :
Bonjour le monde! // En principe, vous ne pouvez pas initialiser la classe ici, mais sans paramètres. Nous en reparlerons plus tard. // conteneur où tous les éléments sont affichés.// Dans notre cas, chaque élément est élément séparé

sur la page. Nous en ferons ressortir beaucoup.
// ... de très nombreux objets // Nous faisons le ménage, car nos articles ont un flotteur : gauche

CSS. Tout ici est tout simplement scandaleux. J'ai connecté le bootstrap, défini plusieurs styles pour le contenu - et c'est parti !
@import url("bootstrap.css"); corps ( arrière-plan : #000 ; ) section.container ( position : absolue ; haut : 50px ; bas : 50px ; largeur : 100 % ; débordement : auto ;) section.container > section.item ( position : relative ; float : gauche ; marge : 0 ; remplissage : 0 ; hauteur : 140px ; débordement : caché ;) section.container > section.item > img (largeur : 100 % ;) JS. C'est là que ça devient intéressant. Au départ, j'ai écrit les fonctions séparément, puis, quand tout a fonctionné, je les ai combinées en une seule classe. GALLERY = ( // définit les paramètres par défaut qui peuvent être remplacés lors de l'initialisation. conteneur : "section.container", // élément du conteneur parent : "section.item", // élément de galerie séparé img : "section.item > img. caché ", // l'image que l'on va initialement "masquer" intervalle : 200, // délai de l'effet de transparence count : 5, // nombre d'éléments à ajouter init: function(params) ( var _self = this; // Remplacement paramètres (si ceux-ci sont passés. Sinon, utilisez la valeur par défaut.) if(params != undefined)( for (var key in params) ( _self = params; ) ) return _self.setUp()), setUp: function() ( var _self = this; // Nous raccrochons les gestionnaires d'événements. Dans notre cas, la fenêtre en a besoin (resize) $(window).bind("resize", function())( _self.adjust(); ) // ... pour le chargement de la page $(document).ready(function())( _self.adjust(); _self.play(); )); méthode de jeu() parcourt // toutes les images avec la classe cachée (au départ tout le monde en a une), après avoir appliqué // l'effet fadeIn(), supprimant la classe. Ainsi, lors du chargement d'un nouveau contenu, le cycle commence // non pas à partir du premier élément, mais à partir du premier élément chargé. // Première fois que j'utilise la méthode queue(). jouer: function() ( var _self = this; var items = $(_self.container).find(_self.img); $(items).each(function(i) ( var cur = $(this).hide( ); $(document).queue("maQueue", function(n) ( cur.removeClass("hidden").fadeIn(_self.interval, n); )); ; ), // Chargement réel du contenu. Tout est simple ici : nous envoyons une requête au serveur - nous recevons // ​​le nouveau contenu sur la page (le cas échéant) et l'affichons à la toute fin du chargement du bloc parent : function() ( var _self = this; $.ajax(( url : "/load .php", tapez : "POST", data: ("count": _self.count), dataType: "json", success: function(json) ( if(json.output ) ( $(_self.container).children ("div.clearfix").before(json.output); _self.adjust(); ) )); // Vérifiez l'état de défilement. Si défilement vertical

dans le bloc parent // égal au maximum possible - nous envoyons une demande de nouveau contenu. // Ainsi, le contenu ne sera chargé que si // nous faisons défiler la page jusqu'à la fin.
checkScroll: function() ( var _self = this; var scrollH = $(_self.container).prop("scrollHeight"); var scrollT = $(_self.container).prop("scrollTop"); var scrollS = $( _self.container).prop("scrollTop") + $(_self.container).height(); if(scrollS == scrollH) ( _self.load(); ) )< $items_on_page; $i++) { $html .= "PHP. Tout ici est primitif, juste pour tester.
$json = tableau(); $html = ""; $items_on_page = !empty($_POST["count"]) ? (int)$_POST["compte"] : 5 ; pour($i = 0; $i
"; ) $json["output"] = $html; echo json_encode($json);

Ici, un seul paramètre est passé à $_POST (le nombre de blocs à ajouter), mais vous pouvez en plus passer le point de départ, en utilisant le principe de la pagination. Il peut être obtenu en JS en utilisant :

D'aussi loin que je me souvienne, les développeurs Web se sont toujours tournés vers la bonne vieille pagination lorsqu'ils ont besoin d'afficher une grande quantité de contenu. Ne vous méprenez pas, la pagination reste un moyen efficace d'afficher du contenu, mais dans cet article, nous parlerons d'une approche différente : le défilement paresseux, également connu sous le nom de défilement infini et sans pagination. Avec cette technique, le contenu est chargé à l'aide d'AJAX lorsque l'utilisateur fait défiler la page jusqu'au point où se termine le contenu chargé. Le défilement paresseux est utilisé par certains géants de l'Internet tels que Facebook et Pinterest. Dans cet article, nous allons essayer d'implémenter notre propre plugin de chargement paresseux en utilisant jQuery.

Avantages et inconvénients

Les avantages de cette méthode sont évidents. Afin d'obtenir une partie supplémentaire du contenu, vous n'avez pas besoin d'aller sur une autre page, ce qui perturbe également votre attention et vous oblige à regarder une autre zone de la page. En ajoutant la fonctionnalité de chargement paresseux, vous gardez l'attention de l'utilisateur sur la même zone pendant la lecture.

Le chargement paresseux n’est pas efficace dans toutes les situations. Par exemple, dans les cas où l'utilisateur clique sur un lien et souhaite ensuite revenir à la page précédente en utilisant l'historique du navigateur, il perd sa position dans la partie chargée via AJAX. Une façon de résoudre ce problème consiste à ouvrir tous les liens dans une nouvelle fenêtre ou un nouvel onglet.

De plus, avant de décider d’utiliser cette technologie, sachez que les moteurs de recherche ne sont pas très amicaux avec de telles solutions. Pour éviter le problème de la visibilité du contenu par les moteurs de recherche, assurez-vous de pouvoir proposer une alternative avec une pagination ou un plan du site.

Commençons

Commençons par dessiner une page très simple. Les parties les plus importantes de la page sont affichées dans le code ci-dessous. Les fichiers complets peuvent être consultés dans les sources.

HTML

Bonjour! Je suis le premier élément Bonjour ! Je suis le deuxième élément Bonjour ! Je suis le troisième élément Donc ça devient ennuyeux... Essayons quelque chose de nouveau Que diriez-vous de charger plus d'éléments via AJAX Cliquez sur le bouton ci-dessous pour charger plus d'éléments charger plus charger plus d'éléments

CSS

#data-container ( marge : 10px ; ) #data-container .data-item ( background-color : #444444 ; border-radius : 5px ; -moz-border-radius : 5px ; -webkit-border-radius : 5px ; remplissage : 5px ; marge : 5px ; couleur : #fff ; ) #loading-div ( affichage : aucun ; ) #button-more( curseur : pointeur ; marge : 0 auto ; couleur d'arrière-plan : #aeaeae ; couleur : #fff ; largeur : 200 px ; hauteur : 50 px ; hauteur de ligne : 50 px)

Notes clés

Si vous regardez de plus près le document que nous avons créé, vous verrez que de nouveaux messages seront chargés lorsque vous cliquerez sur le bouton « charger plus ». Voici les points que nous mettrons en œuvre :

• nous devons faire une requête à l'URL, qui nous renverra une liste d'éléments qu'il faudra insérer sur la page
• ce processus doit être répété à chaque fois que vous cliquez sur le bouton, mais de nouveaux messages doivent alors être renvoyés
• de nouveaux messages doivent être publiés pour chaque demande tant qu'il y a quelque chose à retourner
• lorsqu'il n'y a plus de messages, il est nécessaire d'informer l'utilisateur qu'il a atteint la fin

Modèles de réponse AJAX

Idéalement, nous devons déclarer une variable dans laquelle nous stockerons le numéro de page, et utiliser ce numéro pour déterminer l'URL à laquelle nous enverrons la requête. Dans notre démo, nous aurons trois de ces pages : 2.html, 3.html et une page vierge 4.html.

Lorsque vous cliquez sur le bouton pour télécharger la donnée suivante, un certain temps s'écoule entre l'envoi de la demande et la réception de la réponse. Dans ce cas, nous masquerons le bouton de téléchargement et afficherons à la place un texte indiquant que les éléments sont en cours de téléchargement :

Ajouter les données reçues à la page

Tout d'abord, annulons les modifications que nous avons apportées pendant que la requête était encore en cours d'exécution, c'est-à-dire afficher le bouton « charger plus » et masquer le texte d'information. Deuxièmement, vous devez insérer les données reçues sur la page, après les éléments qui se trouvent déjà sur la page. Notez que par souci de simplicité, dans cet exemple, nous obtenons les données HTML immédiatement comme résultat de la requête. Vous pouvez envoyer une réponse au format JSON, en y ajoutant des variables supplémentaires, telles que le statut ou le message. Le code de débit de données est indiqué ci-dessous :

$(buttonId).show(); $(loadingId).hide(); $(response).appendTo($(conteneur)); page += 1 ;

Traitement de l'option lorsque les données sont épuisées

Une fois que vous avez atteint le dernier message, vous devez montrer à l’utilisateur qu’il n’y a plus de message. Cela peut être fait de différentes manières. Vous pouvez envoyer le statut sous forme de code intégré ou de message dans la réponse. Puisque nous utilisons directement le balisage HTML dans cet exemple, une réponse vide dans notre cas indiquera que les données sont épuisées.

$.ajax(( ... success: function(response) ( // Action si la réponse est vide if (response.trim() == "") ( $(buttonId).fadeOut(); $(loadingId).text ( "Plus d'entrées à charger!"); return; // Si la réponse est correcte), ... ));

Conclusion

Dans cette démo, nous avons fourni une implémentation très basique du chargement paresseux. Bien sûr, vous pouvez faire bien mieux si vous essayez. Pour commencer, vous pouvez supprimer complètement le bouton et envoyer une demande lorsque l'utilisateur fait défiler vers le bas de la page. Cela évitera à l'utilisateur d'avoir besoin d'appuyer davantage sur un bouton et accélérera généralement le processus de visualisation des informations. Deuxièmement, vous pouvez simplement envoyer des données brutes au format JSON et créer le balisage à la volée en utilisant jQuery, par exemple :

$.each(response.items, function(index, value) ( ​​​​$("", ( "class" : "data-item", "text" : value )); ));

Enfin, la réponse JSON peut contenir un message indiquant si la requête a réussi ; données; ainsi que des informations indiquant s'il y a d'autres articles à télécharger. Dans ce cas, c’est un moyen plus efficace d’envoyer le résultat.

Cela fait un moment que je n'ai pas publié de code. Aujourd'hui, je vais corriger la situation et vous donner quelques extraits jQuery utiles qui vous seront certainement utiles sur vos sites Web.

Je n'entrerai pas dans la théorie ; toute la documentation jQuery se trouve sur le site officiel de la bibliothèque. Je vais juste vous rappeler ce qu'est jQuery.

jQuery est Bibliothèque JavaScript, en se concentrant sur Interaction JavaScript et HTML. La bibliothèque jQuery vous aide à accéder facilement à n'importe quel élément DOM, à accéder aux attributs et au contenu Éléments DOM, manipulez-les. Aussi bibliothèque jQuery fournit une API pratique pour travailler avec AJAX.

Alors, c'est parti !

1. Défilement fluide en haut de la page

Aucun site Web ne peut s’en passer. Seulement 4 lignes de code permettront à vos visiteurs de faire défiler toute la page en douceur en un seul clic.

$("a").click(function() ( $("html, body").animate(( scrollTop: 0 ), "slow"); return false; ));

2. En-têtes de tableau en double

Pour améliorer la perception et la lisibilité de vos tableaux, vous pouvez dupliquer leurs titres sous le tableau. Cela semble être une petite chose, mais c'est très pratique dans les tableaux complexes et grands qui ne tiennent pas sur un seul écran.

Var $tfoot = $(""); $($("thead").clone(true, true).children().get().reverse()).each(function())( $tfoot.append($(this)); )); $tfoot.insertAfter("tête de table");

3. Chargement de données externes

AVEC en utilisant jQuery très facile à charger sur des pages Web contenu externe. Il peut être sorti directement vers un bloc DIV, comme dans l'exemple ci-dessous.

$("#content").load("somefile.html", function(response, status, xhr) ( // gestion des erreurs if(status == "error") ( $("#content").html(" Une erreur s'est produite : " + xhr.status + " " + xhr.statusText); ) ));

4. Même hauteur de colonne

On sait qu'aligner les blocs en hauteur moyens standards HTML et CSS ne sont pas si simples. Quelques lignes de code ci-dessous vous permettront de rendre la hauteur de tous les blocs égale à la hauteur du plus grand bloc.

var hauteur maximale = 0; $("div.col").each(function())( if($(this).height() > maxheight) ( maxheight = $(this).height(); ) )); $("div.col").hauteur(hauteurmax); 5. Table zèbre

Comme vous le savez, la perception et la lisibilité d'un tableau seront sensiblement meilleures si vous effectuez une alternance de lignes multicolores. C'est très simple à implémenter dans jQuery.

$(document).ready(function())( $("table tr:even").addClass("stripe"); ));

6. Mise à jour partielle de la page

En utilisant jQuery, il est très facile d’implémenter une actualisation de page en bloc (partielle). Par exemple, le code ci-dessous vous permettra de rafraîchir automatiquement le bloc #refresh toutes les 10 secondes.

SetInterval(function() ( $("#refresh").load(location.href+" #refresh>*",""); ), 10000); // millisecondes à attendre

7. Préchargement des images

Ce code vous permet de charger des images dans arrière-plan sans chargement lors de la visualisation de la page. Énumérez simplement à la ligne 7 les images dont vous avez besoin pour le préchargement.

$.preloadImages = function() ( for(var i = 0; i maxWidth)( ratio = maxWidth / width; $(this).css("width", maxWidth); $(this).css("height", hauteur * ratio); hauteur = hauteur * ratio; ) var largeur = $(this).width(); var hauteur = $(this).height(); (this).css("hauteur", maxHeight); $(this).css("largeur", largeur * ratio); //$("#contentpage img").show(); //REDIMENSIONNEMENT DE L'IMAGE ));

12. Chargement du contenu lors du défilement de la page

Le plus souvent, cette technique est appelée défilement sans fin. Le contenu est chargé au fur et à mesure que l'utilisateur fait défiler la page. C'est assez facile à mettre en œuvre en utilisant le code ci-dessous.

Chargement de la variable = faux ; $(window).scroll(function())( if((($(window).scrollTop()+$(window).height())+250)>=$(document).height())( if ( chargement == false)( chargement = true; $("#loadingbar").css("display","block"); $.get("load.php?start="+$("#loaded_max") . val(), function(loaded)( $("body").append(loaded); $("#loaded_max").val(parseInt($("#loaded_max").val())+50); $ ("#loadingbar").css("display","none"); chargement = false ) ) ); $(document).ready(function() ( $("#loaded_max").val(50); ));

13. Vérification du chargement de l'image

Vous devez souvent vérifier si une image est chargée dans à l'heure actuelle ou non. Et jQuery nous aidera encore une fois.

Var imgsrc = "img/image1.png"; $(" ").load(function () ( alert("image chargée"); )).error(function () ( alert("erreur de chargement de l'image"); )).attr("src", imgsrc);

14. Tri par ordre alphabétique

Si vous avez besoin d'un tri dynamique d'une liste par ordre alphabétique, ce petit extrait vous aidera certainement.

$(function() ( $.fn.sortList = function() ( var ma liste = $(this); var listitems = $("li", ma liste).get(); listitems.sort(function(a, b) ( var compA = $(a).text().toUpperCase(); var compB = $(b).text().toUpperCase(); return (compA< compB) ? -1: 1; }); $.each(listitems, function(i, itm) { mylist.append(itm); }); } $("ul#demoOne").sortList(); });

Enregistrez-le - cela vous sera utile.

Toutes les nouveautés et les plus intéressantes du monde WordPress sur ma chaîne Telegram. S'abonner!