Une
méthode / un outil:
Lister les images d'une page web et leur poids
Comment réaliser son propre outil de calcul de poids de page? Une technique inspirée des résultats produits par un petit utilitaire fourni par Microsoft. Comparaison méthode / outil.
La méthode
Dans un précédent article, consacré aux "
javascript:i='';
for (j=0;j<document.images.length;j++)
{
i+='<img src='+document.images[j].src+'><br>'
};
if(i!='')
{
document.write('<center>'+i+'</center>');void(document.close())
}
else
{
alert('Aucune image !')
}
(nous avons, comme d'habitude, "aéré"
le code du bookmarklet, qui s'écrit sur une seule ligne habituellement)
Nous allons modifier ce "bookmarklet" pour y inclure,
en plus de l'énumération brute des images, le calcul
du poids de chacune d'elle et de leur poids total:
javascript:html='';
total=0;
html+='<html><body><table width=100% cellspacing=10>';
for(j=0;j<document.images.length;j++){
img='<img src='+document.images[j].src+'>';
pds=parseInt(document.images[j].fileSize);
total+=pds;
html+='<tr><td width=45%><div
align=right><font face=Verdana size=1>'
html+=document.images[j].src;
html+='</font></div></td>';
html+='<td width=5%><font
face=Verdana size=1><b>';
html+=pds;
html+=' octets</b></font></td>';
html+='<td width=50%>'+img+'</td></tr>';
};
html+='<tr><td><font face=Verdana
size=1><b>Poids total: ';
html+=total;
html+=' octets - ';
html+=document.images.length;
html+=' - images</b></font></td><tr></table></body></html>';
document.write(html);
(même remarque que précédemment)
Nous avons créé ici une variable "chaîne"
nommée html qui va contenir l'ensemble du code HTML
transmis au navigateur et est initialisée à vide.
Nous initialisons également une variable "entière"
total qui va recevoir la somme des poids des différentes
images.
Nous parcourons (boucle for) toutes les images du document
qui contient le "bookmarklet" et nous récupérons,
pour chacune, l'URL source, la taille en octet du fichier
que nous additionnons à notre poids total en prenant bien
garde de convertir (fonction parseInt) la valeur en entier
(car elle est donnée sous forme de chaîne par la méthode
fileSize). Enfin, nous produisons le code HTML pour afficher
correctement l'ensemble (en grisé le code permettant d'agrémenter
encore la présentation, mais que l'on pourra se dispenser
d'inclure).
Nous transmettons ensuite ce code HTML au navigateur par un document.write()
auquel nous ne pouvions faire appel plus tôt dans notre script,
car nous aurions perdu l'information sur les images, information
relative à l'objet document qui contient le "bookmarklet",
et non celui constitué par le code HTML envoyé au
navigateur.
Une
démonstration est disponible. Vous pouvez ensuite ajouter notre
"bookmarklet" amélioré à la barre
de liens ou aux favoris de votre navigateur IE (voir le
Remarque: lors du test du "bookmarklet" proposé,
il se peut que le décompte final du poids soit chaque fois
différent: c'est tout à fait normal, car provoqué
par la rotation de bannières publicitaires sur la page.
L'outil
L'alternative au développement de votre propre outil de calcul
de poids de page est constitué par le téléchargement
d'un "accessoire" (propre à IE5) sur le site
de Microsoft. Celui-ci s'installe très facilement, et vous
permettra d'obtenir un résultat similaire à celui
de notre "bookmarklet" (quoique plus "étoffé"
et convivial, bien entendu). Rien ne vous empêche de continuer
le "hacking" du "bookmarklet" initial pour lui
faire réaliser exactement ce que l'utilitaire Microsoft effectue,
à savoir, notamment, regrouper les images identiques, tenir
compte des "frames" et améliorer la présentation.
[Jérôme
Morlon, 3
mars 2002 , JDNet]
|
