Javascript : un bookmarlet pour lister les images d'une page et leur poids
Retour sur un grand classique du JDN Développeurs, afin de lui apporter des améliorations nécessaires.
(03/04/2004)
Nous reprenons ici le code de notre bookmarlet
nous permettant lister les images d'une page web et leur poids.
Ce bookmarlet fonctionnait très bien, sauf pour un détail
d'importance : il ne retirait pas les doublons du calcul, et
affichait donc toutes les occurences d'une image dans la page.
Cela ne posait pas problème pour les pages conçues
avec des occurences uniques d'images (comme certains sites en
CSS complet), mais cela fausait le calcul dès qu'une
page utilisait une mise en page à base de pixels transparents,
par exemple.
Notez que pour calculer la taille, nous utilisons la méthode
propriétaire .fileSize, qui a notre connaissance n'existe
que sous Internet Explorer et n'a pas d'équivalence dans
les autres navigateurs. Ce bookmarlet est donc "limité"
au marché de IE. Nota : une limite à 255 caractères des URLs
stockées par certaines versions de IE6 fait que ce bookmarlet
ne marchera probablement pas sur celles-ci...
Voici donc
le code de notre bookmarlet, mis en page pour cet article (il
devrait pour fonctionner tenir sur une seule ligne) : html = '';
poidsTotalImages = 0;
poidsFichier = 0;
imagesPassees = new Array();
poidsFichier = document.fileSize*1;
html += '<html><body><table width=100% cellspacing=1>';
for (i = 0; i < document.images.length; i++)
{
j=0;
flag=0;
k = imagesPassees.length;
while (j <= k)
{
if ( (imagesPassees[j] == document.images[i].src)
|| (document.images[i].fileSize == '-1') )
{
flag=1;
}
j++;
}
if (document.images[i].fileSize == '-1')
{ imagesCassees++; }
if (flag == 0)
{
imagesPassees.push(document.images[i].src);
html += '<tr><td width=45%><div
align=right><font face=Verdana size=1>'
html += document.images[i].src;
html += '</font></div></td>';
html += '<td width=10%><font face=Verdana
size=1><b>';
html += poidsImageEnCours;
html += ' octets</b></font></td>';
html += '<td width=45%><img src='
+ document.images[i].src + '></td></tr>';
}
};
html += '<tr><td><font face=Verdana size=1><b>Poids
total des images: ';
html += poidsTotalImages;
html += ' octets pour ';
html += imagesPassees.length;
html += ' images</b></font></td><tr>';
html += '<tr><td><font face=Verdana size=1><b>Poids
de la page: ';
html += poidsFichier;
html += ' octets';
html += '</b></font></td><tr>';
poidsDuTout = poidsFichier+poidsTotalImages;
html += '<tr><td><font face=Verdana size=1><b>Poids
du tout: ';
html += poidsDuTout;
html += ' octets';
html += '</b></font></td><tr>';
if (imagesCassees > 0)
{
html += '<tr><td><font face=Verdana size=1><b>Nota:
';
html += imagesCassees;
if (imagesCassees > 1)
{
html += ' images n\'ont pas été prises
en compte car elles étaient inaccessibles ou absentes.';
}
else
{
html += ' image n\'a pas été prise en
compte car elle était inaccessible ou absente.';
}
html += '</b></font></td><tr>';
}
