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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Comment alléger le plus possible une grille de 1400 liens ?

Dj YeLL

$question = $to_be || !$to_be;

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 :

Multiplié par 1400 ça faisait beaucoup.

J'ai ensuite diminué petit à la taille pour arriver à ça :

Ç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

Publicité

nargy

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

Dj YeLL

$question = $to_be || !$to_be;

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

nargy

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é.

anapajari

s/travail/glanding on hfr/gs;

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

Dj YeLL

$question = $to_be || !$to_be;

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

anapajari

s/travail/glanding on hfr/gs;

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

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Exemple</title>
<style type="text/css">
.grid{
background-color: #00FFFF;
}
.used{
position: absolute;
background-color: #0000FF;
}
.selected{
position: absolute;
background-color: #00FF00;
}
.error{
position: absolute;
background-color: #FF0000;
}
</style>
<script type="text/javascript">
function Grid( width, height, arWidth, arHeight){
this.width = width==null?100:width;
this.height = height==null?100:height;
this.arWidth = arWidth==null?10:arWidth;
this.arHeight = arHeight==null?10:arHeight;
this.gridNode = document.createElement('div');
this.gridNode.className = "grid";
this.gridNode.style.height = this.height+'px';
this.gridNode.style.width = this.width+'px';
this.selArray = new Array();
var self = this;
this.gridNode.onclick= function (event){
if(!event) var event=window.event;
if (document.all){ cX=event.clientX; cY=event.clientY; }
else {cX=event.pageX; cY=event.pageY; }
self.addElem(Math.floor((cX - self.pX)/self.arWidth), Math.floor((cY - self.pY)/self.arHeight), 'selected');
}
document.getElementsByTagName('body')[0].appendChild(this.gridNode);
this.pX = 0;
this.pY = 0;
var element = this.gridNode;
while (element!=null){
this.pX +=element.offsetLeft-element.scrollLeft;
this.pY +=element.offsetTop-element.scrollTop;
element=element.offsetParent;
}
return true;
}
Grid.prototype.addElem = function (row,col, type){
if ( this.isSet(row, col) ){
return false;
}
this.selArray.push({'x':row, 'y':col, 'type':type});
var arNode = document.createElement('div');
arNode.row = row;
arNode.col = col;
arNode.className=type;
arNode.style.left = ( arNode.row*this.arWidth + this.pX)+'px';
arNode.style.top = ( arNode.col*this.arHeight + this.pY)+'px';
arNode.style.width = this.arWidth+'px';
arNode.style.height= this.arHeight+'px';
document.getElementsByTagName('body')[0].appendChild(arNode);
if ( type!= 'error' && type!='used'){
var self = this;
arNode.onclick = function (e){
self.removeElem(this);
}
}
return true;
}
Grid.prototype.removeElem = function ( elem){
var nA = new Array();
for (var i=0; i<this.selArray.length; i++){
if ( this.selArray[i]['x'] != elem.row || this.selArray[i]['y'] != elem.col){
nA.push( this.selArray[i]);
}
}
this.selArray = nA;
elem.parentNode.removeChild(elem);
return true;
}
Grid.prototype.dispContent = function(){
var r = '';
for(var i =0; i<this.selArray.length; i++){
r+="row:"+this.selArray[i]['x'] +"\tcol:"+this.selArray[i]['y']+"\ttype:"+this.selArray[i]['type']+"\n";
}
return r;
}
Grid.prototype.fill = function( type, arr){
for(var i in arr){
this.addElem(arr[i]['x'], arr[i]['y'], type)
}
return true;
}
Grid.prototype.isSet = function (row, col){
for(var i =0; i<this.selArray.length; i++){
if ( this.selArray[i]['x'] == row && this.selArray[i]['y'] == col ){
return true;
}
}
return false;
}
function main(){
var gs = new Grid(400,400, 20, 20);
var usedArea = new Array(
{'x':1, 'y':1},
{'x':4, 'y':6},
{'x':7, 'y':5},
{'x':3, 'y':4}
);
gs.fill('used', usedArea);
var errorArea = new Array(
{'x':7, 'y':7},
{'x':5, 'y':4},
{'x':7, 'y':6},
{'x':10, 'y':10}
);
gs.fill('error', errorArea);
var expNode = document.createElement('input');
expNode.setAttribute('type','button');
expNode.value='Afficher';
expNode.onclick = function (e){
alert(gs.dispContent());
}
document.getElementsByTagName('body')[0].appendChild(expNode);
}
window.onload=main;
</script>
</head>
<body>
</body>
</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

Dj YeLL

$question = $to_be || !$to_be;

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 :

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

Je te tiens au courant

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

vomegaz

~Libriste & Gulden Draak fan~

utilise aussi la mise en cache.

Message cité 1 fois

anapajari

s/travail/glanding on hfr/gs;

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 )...

Publicité

vomegaz

~Libriste & Gulden Draak fan~

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...

Dj YeLL

$question = $to_be || !$to_be;

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

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
Est-il possible de charger une page WEB dans une cellule de tableau ?	Est-il possible de réduire la hauteur d'un formulaire?
(Abandonné) statistiques site : liens externes	nbr de site perso possible chez Free
Est-ce possible ?	Cela est t'il possible avec un text box ?
Validation de liens google maps	[Swing] Un Jtree de JPanels... possible ? Si oui comment ?
[C] "correspondance" possible entre FILE * et socket ? [résolu]
Plus de sujets relatifs à : Comment alléger le plus possible une grille de 1400 liens ?

Page générée en 0.088 secondes