1. Mise en œuvre du chargement différé d'images avec jQuery

Le chargement différé des images est une technique de plus en plus populaire dans les sites de commerce électronique, permettant d'améliorer l'expérience utilisateur, d'accélérer le chargement des pages et de réduire la presssion sur les sreveurs. Des plateformes comme Taobao, JD.com et Vancl utilisent cette technologie pour optimiser leurs performances.

jQuery.lazyload.js est un plugin basé sur jQuery qui permet de ne charger que les images visibles dans la zone visible de l'écran.

Pour utiliser jQuery.lazyload.js, il faut d'abord inclure jQuery dans la page, puis ajouter le plugin jQuery.lazyload.js. Il est également nécessaire d'avoir une image de remplacement (placeholder) comme grey.gif ou loading.gif.

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-lazyload@1.9.7/jquery.lazyload.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
    $("img").lazyload({
        placeholder: "https://example.com/images/grey.gif",
        effect: "fadeIn"
    });
});
</script>

Cependant, en utilisant des outils comme HTTPWatch, on remarque que toutes les images sont en réalité chargées, ce qui annule partiellement l'intérêt du chargement différé. C'est parce que le JavaScript s'exécute après le chargement complet de la page, et les images sont simplement chargées depuis le cache.

Pour résoudre ce problème, il faut modifier la ligne 62 de jquery.lazyload.js en remplaçant $(self).attr("original", $(self).attr("img")); par $(self).attr("original", $(self).attr("original"));. Ensuite, il faut remplacer img= par original= dans les balises img. C'est ainsi que des sites comme Vancl et Taobao implémentent véritablement le chargement différé.

2. Utilisation des méthodes serializeArray et serialize

Important : Pour que ces deux méthodes fonctionnent correctement, les éléments input du formulaire doivent obligatoirement avoir un attribut name.

Sérialisation des paramètres de formulaire

Sans jQuery, un formulaire peut être soumis directement, mais cela présente des problèmes de sécurité (pour les soumissions GET) ou de validation des paramètres. Si vous devez traiter les données en JavaScript avant soumission (validation, concaténation, etc.), cela peut devenir fastidieux si vous devez extraire chaque valeur de formulaire individuellement.

jQuery fournit deux méthodes très utiles : serializeArray() et serialize().

La première sérialise les paramètres du formulaire sous forme de tableau (idéal pour les soumissions POST), tandis que la seconde sérialise les paramètres sous forme de chaîne de caractères clé-valeur (idéal pour les soumissions GET).

function traiterFormulaire(typeSoumission) {
    if (typeSoumission === 1) {
        // Utilisation de serializeArray
        var donneesFormulaire = $("#monFormulaire").serializeArray();
        console.log("Données sérialisées (tableau) :");
        console.log(donneesFormulaire);
        
        // Conversion en objet
        var objetDonnees = {};
        for (var i = 0; i < donneesFormulaire.length; i++) {
            objetDonnees[donneesFormulaire[i].name] = donneesFormulaire[i].value;
        }
        console.log("Données converties en objet :");
        console.log(objetDonnees);
    } else {
        // Utilisation de serialize
        var parametresURL = $("#monFormulaire").serialize();
        console.log("Paramètres URL :");
        console.log(parametresURL);
        
        // Utilisation directe dans une URL
        var urlComplete = "https://example.com/traitement?" + parametresURL;
        console.log("URL complète :");
        console.log(urlComplete);
    }
}

Quelques points importants à noter :

1. Les champs non remplis dans le formulaire ne seront pas inclus dans la sérialisation
2. Pour les cases à cocher multiples, seule la première valeur sera sérialisée
3. Le sérialisation ne fonctionne pas si le formulaire est placé dans un tableau (table) en raison d'un conflit avec les normes HTML

Ces méthodes simplifient grendement la manipulation des données de formulaire avant leur envoi au serveur.