Aller au menu - Aller au contenu

Icône Images & Cookies Loading

Par Avatar Sébastien de la Marck (Thunderseb) et Avatar Johann Pardanaud (Nesquik69)
Mise à jour : 07/12/2010
Difficulté : Intermédiaire Intermédiaire
6 849 visites depuis 7 jours, dont 85 sur ce chapitre classé 33/786
Chapitre rédigé par Thunderseb
Compatibilité de la méthode
Image utilisateur
Méthode		Image utilisateur
Internet Explorer		Image utilisateur
Firefox		Image utilisateur
Opera		Image utilisateur
Google Chrome		Image utilisateur
Safari
Images & Cookies Loading
Oui
Oui
Oui
Oui
Oui
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Introduction

Le principe du Dynamic Script Loading était déjà un peu tordu, mais pas assez pour rivaliser avec l'Images & Cookies Loading !

Le gros problème du Dynamic Script Loading était qu'on n'avait pas de moyen réel pour savoir si le chargement avait bien eu lieu. Il nous fallait une fonction de callback, embêtante à mettre en place. Il se fait que les images possèdent un évènement onload qui permet de déclencher un script ou une fonction une fois que l'image est complètement chargée.

Eh bien c'est le principe d'Image & Cookies Loading. Mais au lieu de récupérer un fichier contenant du code JavaScript, nous allons utiliser une page PHP qui enregistrera un cookie, et qui redirigera vers une image de très petite taille. Une fois cette image chargée, l'évènement onload de l'image sera déclenché, et nous pourrons récupérer la valeur du cookie.
Retour en haut

Mise en place

Comme avec Dynamic Script Loading, il faut ajouter un élément HTML qui appellera notre page PHP. Ici, nous allons tout simplement définir un objet Image :

Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
function send() {
        var oImg = new Image();
        oImg.onload = function () {
                alert(cleanString(getCookie("Ajax_ImagesCookies")));
        }
                
        var pseudo = encodeURIComponent("Thunderseb");
        var prenom = encodeURIComponent("Sébastien");
        oImg.src = "CookiesImagesLoading_1.php?Pseudo=" + pseudo + "&Prenom=" + prenom; 
}


Je place sur l'évènement onload le code qui sera exécuté quand l'image sera chargée. Le contenu du cookie est récupéré avec getCookie, fonction donnée dans la partie précédente. Ne faites pas attention à l'appel de la fonction cleanString, j'y reviendrai plus tard. L'image est automatiquement chargée, car un objet Image est inséré dans l'array global document.image, ce qui explique qu'il n'y ait pas besoin d'insérer via DOM l'image dans la page.

Ce qu'il faut comprendre, c'est que ce script JS est censé appeler une image. Donc, pour donner le change, il faut que la page PHP appelée puisse renvoyer une image. Cette image sera tout simplement une image GIF blanche d'un pixel sur un pixel (elle ne sera pas affichée de toute manière).

Voici la page PHP qui réceptionne les variables passées en URL, et qui crée un cookie contenant le texte à renvoyer. Un fois ce traitement fini, le script est redirigé vers l'image :

Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<?php
                
header("Content-type: image/gif");
                
if(isset($_GET['Pseudo']) && isset($_GET['Prenom'])) {
        $sMessage = "Votre pseudo est ".$_GET['Pseudo'].", et vous vous appelez ".$_GET['Prenom']." !";
        setcookie("Ajax_ImagesCookies", $sMessage);
}
 
header("Location: images/white.gif");
 
?>


Une fois que le script est redirigé vers l'image white.gif, l'image est chargée par le script JavaScript, et l'évènement onload est déclenché.



Vous devez penser à vérifier si les cookies sont acceptés par le navigateur (comme vu dans la partie précédente), et prévoir une technique de secours si les cookies se révèlent désactivés.

Il se peut aussi que dans le message renvoyé par PHP et stocké dans le cookie, tous les espaces soient remplacés par des + . C'est la raison pour laquelle j'ai créé la fonction cleanString qui permet de remplacer les + par des espaces.

Voici d'ailleurs cette fonction :

Code : JavaScript
1
2
3
function cleanString(sString) {
        return sString.replace(/(\+)/g, " ");
}
Retour en haut

Conclusion

Ce système d'image et de cookie est fait pour des petites quantités de données non-sécurisées (évitez d'y faire transiter des mots de passe). Ca peut être utile dans certains cas :) .

Points forts


  • Facile à mettre en place
  • Bon contrôle de la réception (onload)
  • Prévu pour la réception de petites quantités de données


Points faibles


  • Les cookies doivent être activés
  • Prévu pour des petites quantités de données (limitation de taille due aux cookies)
  • Ne gère que les données textuelles
  • Limité à la méthode GET
Retour en haut
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
1 commentaire pour "Images & Cookies Loading"
Note moyenne : 3.60 / 4 (138 votes)
Pseudo Commentaire
Hors ligne LCaba # Posté le 25/11/2010 à 14:10:02
A dollar is what I need
Avatar

Avis : Bon

Ville : Toulouse
Pays : France métropolitaine

 J'aime beaucoup les trucs tordus comme ça :D Je me demande si beaucoup de gens utilisent ce genre de méthode.

En revanche la fonction decodeURIComponent me semble plus adaptée que la fonction cleanString proposée (d'autant qu'il existe d'autres caractères spéciaux que l'espace).

Enfin, j'aurais mis un readfile("images/white.gif") à la place d'une redirection pour éviter au navigateur une deuxième requête.
Codez couverts grâce à "use strict" !
MUSIQUE : découvrez mon frère, Kryl
Image utilisateur
 

Voir tous les commentaires