Comment alléger le plus possible une grille de 1400 liens ?

Comment alléger le plus possible une grille de 1400 liens ? - HTML/CSS - Programmation

Marsh Posté le 02-08-2006 à 22:37:50    

Bonsoir,
 
J'ai une page sur laquelle il y a une grille de 1400 élements (20*70), parmis lesquels l'utilisateur doit choisir.
 
Au départ ça ressemblait à ça :
 

<a class="free" href="?act=chx&anim=1&duration=12&cell=1x1" />1x1</a>


 
Multiplié par 1400 ça faisait beaucoup.
 
J'ai ensuite diminué petit à la taille pour arriver à ça :
 

<input type="submit" name="c" value="1x1" />


 
Ça fait tjs gagner des ko.
 
Au final, j'arrive à un page pesant 60ko au total. J'ai gagné presque 50% de poids depuis le début. Mais je me demandais s'il n'y avait pas un truc encore plus bête auquel je ne pense pas, pour réduire encore plus le poids de la page. Si possible sans utilisation de JS.
 
Merci par avance :)


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 02-08-2006 à 22:37:50   

Reply

Marsh Posté le 02-08-2006 à 22:54:58    

hehe.. primo, tu peut virer les ", le / et l'espace en  trop.
Celà necessite que tu passe en HTML transitional.


Message édité par nargy le 02-08-2006 à 22:55:54
Reply

Marsh Posté le 02-08-2006 à 23:12:44    

En effet, sauf que tout le site est développé pour du XHTML.
 
De toute façon je me demandais surtout s'il n'y avait pas quelque chose à laquelle je ne pensais pas qui me permettrait de réduire radicalement la taille...
 
Par exemple, sur une page qui affichait 500 balises img, avec leur contenu, toutes identiques, j'ai réfléchi un peu, et j'ai transformé ça en un background-image, avec un repeat par exemple, donc ça a changé radicalement la donne...
 
D'ailleurs ça me fait penser à un truc du même style pour cette page ci... je me demande si j'aurais pas moyen de me demerder avec un <input type="image" />... car ça renvoi les coordonnées du clic ...
 
Je vais voir si je peux creuser de ce côté là.
 
Merci pour ta proposition en tout cas :jap:


Message édité par Dj YeLL le 02-08-2006 à 23:13:00

---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 02-08-2006 à 23:36:25    

Perso, je creuserai du côté de javascript.
Un petit <noscript><a>Comme vous n'avez pas JavaScript le site va ramer un peu pour vous, ne recommencez plus ou cliquez sur ce gros lien pabo</a></noscript> et le tour est joué.

Reply

Marsh Posté le 03-08-2006 à 09:42:09    

T'as besoin de faire quoi exactement :??:
En gros t'as une grille et tu veux savoir ou à cliquer l'utilisateur?

Reply

Marsh Posté le 03-08-2006 à 13:12:17    

Plus ou moins oui.
 
En fait c'est une grille avec 1400 emplacements, les utilisateurs peuvent en reserver un ou plusieurs.
 
Quand les gens arrivent sur la page de reservation, la grille s'affiche, avec des couleurs differentes (4) selon le type de case :
 
Libre = Bleu clair
Occupée = Bleu foncé
Selectionnée = Vert
Erreur = Rouge
 
Les infos de chaque cases sont tirées d'une BDD


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 03-08-2006 à 13:46:58    

tiens comme j'avais un peu de temps entre midi et deux et que ton truc m'amusait j'ai fait ça:

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.   <title>Exemple</title>
  7.   <style type="text/css">
  8.   .grid{
  9.     background-color: #00FFFF;
  10.   }
  11.   .used{
  12.     position: absolute;
  13.     background-color: #0000FF;
  14.   }
  15.   .selected{
  16.     position: absolute;
  17.     background-color: #00FF00;
  18.   }
  19.   .error{
  20.     position: absolute;
  21.     background-color: #FF0000;
  22.   }
  23.   </style>
  24.   <script type="text/javascript">
  25. function Grid( width, height, arWidth, arHeight){
  26.   this.width = width==null?100:width;
  27.   this.height = height==null?100:height;
  28.   this.arWidth = arWidth==null?10:arWidth;
  29.   this.arHeight = arHeight==null?10:arHeight;
  31.   this.gridNode = document.createElement('div');
  32.   this.gridNode.className = "grid";
  33.   this.gridNode.style.height = this.height+'px';
  34.   this.gridNode.style.width = this.width+'px';
  35.   this.selArray = new Array();
  36.   var self = this;
  37.   this.gridNode.onclick= function (event){
  38.     if(!event) var event=window.event;
  39.     if (document.all){ cX=event.clientX; cY=event.clientY; }
  40.     else {cX=event.pageX; cY=event.pageY; }
  42.     self.addElem(Math.floor((cX - self.pX)/self.arWidth), Math.floor((cY - self.pY)/self.arHeight), 'selected');
  43.    
  44.   }
  45.   document.getElementsByTagName('body')[0].appendChild(this.gridNode);
  47.   this.pX = 0;
  48.   this.pY = 0;
  49.   var element = this.gridNode;
  50.   while (element!=null){
  51.     this.pX +=element.offsetLeft-element.scrollLeft;
  52.     this.pY +=element.offsetTop-element.scrollTop;
  53.     element=element.offsetParent;
  54.   }
  55.   return true;
  56. }
  57. Grid.prototype.addElem = function (row,col, type){
  58.   if ( this.isSet(row, col) ){
  59.     return false;
  60.   }
  62.   this.selArray.push({'x':row, 'y':col, 'type':type});
  63.   var arNode = document.createElement('div');
  64.   arNode.row = row;
  65.   arNode.col = col;
  66.   arNode.className=type;
  67.   arNode.style.left = ( arNode.row*this.arWidth + this.pX)+'px';
  68.   arNode.style.top = ( arNode.col*this.arHeight + this.pY)+'px';
  69.   arNode.style.width = this.arWidth+'px';
  70.   arNode.style.height= this.arHeight+'px';
  71.   document.getElementsByTagName('body')[0].appendChild(arNode);
  72.   if ( type!= 'error' && type!='used'){
  73.     var self = this;
  74.     arNode.onclick = function (e){
  75.       self.removeElem(this);
  76.     }
  77.   }
  78.   return true;
  79. }
  80. Grid.prototype.removeElem = function ( elem){
  81.   var nA = new Array();
  82.   for (var i=0; i<this.selArray.length; i++){
  83.     if ( this.selArray[i]['x'] != elem.row ||  this.selArray[i]['y'] != elem.col){
  84.       nA.push( this.selArray[i]);
  85.     }
  86.   }
  87.   this.selArray = nA;
  88.   elem.parentNode.removeChild(elem);
  89.   return true;
  90. }
  91. Grid.prototype.dispContent = function(){
  92.   var r = '';
  93.   for(var i =0; i<this.selArray.length; i++){
  94.     r+="row:"+this.selArray[i]['x'] +"\tcol:"+this.selArray[i]['y']+"\ttype:"+this.selArray[i]['type']+"\n";
  95.   }
  96.   return r;
  97. }
  98. Grid.prototype.fill = function( type, arr){
  99.   for(var i in arr){
  100.     this.addElem(arr[i]['x'], arr[i]['y'], type)
  101.   }
  102.   return true;
  103. }
  104. Grid.prototype.isSet = function (row, col){
  105.   for(var i =0; i<this.selArray.length; i++){
  106.     if ( this.selArray[i]['x'] == row && this.selArray[i]['y'] == col ){
  107.       return true;
  108.     }
  109.   }
  110.   return false;
  111. }
  114. function main(){
  115.   var gs = new Grid(400,400, 20, 20);
  116.   var usedArea = new Array(
  117.       {'x':1, 'y':1},
  118.       {'x':4, 'y':6},
  119.       {'x':7, 'y':5},
  120.       {'x':3, 'y':4}
  121.   );
  122.   gs.fill('used', usedArea);
  123.   var errorArea = new Array(
  124.       {'x':7, 'y':7},
  125.       {'x':5, 'y':4},
  126.       {'x':7, 'y':6},
  127.       {'x':10, 'y':10}
  128.   );
  129.   gs.fill('error', errorArea);
  130.   var expNode = document.createElement('input');
  131.   expNode.setAttribute('type','button');
  132.   expNode.value='Afficher';
  133.   expNode.onclick = function (e){
  134.     alert(gs.dispContent());
  135.   }
  136.   document.getElementsByTagName('body')[0].appendChild(expNode);
  137. }
  139. window.onload=main;
  140.   </script>
  141. </head>
  142. <body>
  143. </body>
  145. </html>


Ca doit faire ce que tu veux ( si j'ai tout compris ;) )...
Il ne te reste qu'a initialiser les tableaux used et error pour que ça remplisse correctement en fonction de la bdd.
Et oui je sais y'a pas de commentaires mais j'avais pas trop le temps!

Message cité 1 fois
Message édité par anapajari le 03-08-2006 à 13:48:57
Reply

Marsh Posté le 03-08-2006 à 13:53:32    

anapajari a écrit :

tiens comme j'avais un peu de temps entre midi et deux et que ton truc m'amusait j'ai fait ça:

Code :
  1. ...


Ca doit faire ce que tu veux ( si j'ai tout compris ;) )...
Il ne te reste qu'a initialiser les tableaux used et error pour que ça remplisse correctement en fonction de la bdd.
Et oui je sais y'a pas de commentaires mais j'avais pas trop le temps!


 
La vache ... ben merci beaucoup :)
 
Je vais essayer de modifier ça pour l'adapter à ce que je veux, mais dans les grandes lignes oui, c'est bien.
 
Merci beaucoup :jap: Ça m'aurait pris 2 mois à faire ça en JS :D
 
Je te tiens au courant :)


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 04-08-2006 à 13:29:44    

utilise aussi la mise en cache.

Message cité 1 fois
Reply

Marsh Posté le 04-08-2006 à 14:19:30    

vomegaz a écrit :

utilise aussi la mise en cache.


Explique moi comment tu peux mettre en cache une page avec 1400 liens qui peuvent tous changer à tout instant ( passer de class free à used ou error )...

Reply

Marsh Posté le 04-08-2006 à 14:19:30   

Reply

Marsh Posté le 07-08-2006 à 18:14:28    

désolé j'avais pas lu tous le poste. je croyais qu'il sagisé d'une page fabirque à partir d'une base de donnée avec php...

Reply

Marsh Posté le 08-08-2006 à 09:02:22    

Bon, merci pour votre aide.
 
Grâce à vous, et notamment au script JS d' anapajari, j'ai réussi à tout faire en Php/Html avec des calques et un input type="image".
 
Lorsque je clique quelque part, le script reçoit les coordonnées, et après quelques calcul les transforme en dimensions pour un calque (en class used, error, select ...), que je place en absolute, le rendu est nickel, et compatible tout navigateur apparement (faut juste faire un calcul en plus avec le moteur Gecko – Firefox)
 
Du coup au lieux de 0.9 secondes de chargement et d'une page à 65ko, je tombe à 0.02 secondes de chargement et une page à 2ko :)
 
Encore merci :jap:


---------------
Gamertag: CoteBlack YeLL
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed