Discussion :

[danielhagnoul]

Bonjour à toutes et à tous.

Ce message est ma première intervention sur ce forum et je débute, tout juste, en jQuery, soyez indulgent.

Je souhaite le conseil de pros en jQuery pour améliorer la vitesse d’apparition de ma page et la fluidité d’apparition de l’image centrale : http://www.hagnoul.net/dvjhTest/cuisine/cuisine.html

La version actuellement visible par les internautes est : http://www.hagnoul.net/cuisine/cuisine.html

Je souhaitais améliorer la maintenance du site : pouvoir ajouter, retirer et modifier l’emplacement des petites photos (que j’appelle vignette) plus facilement.

Mais la version actuelle est plus rapide que la nouvelle version et l’image centrale, apparaît de façon saccadée.

J’ai essayé un hide(‘slow’) – changement d’image – show(‘slow’) mais alors que je m’attendais à la disparition de l’ancienne image et à l’apparition de la nouvelle image toute l’animation ce fait avec l’ancienne image.

Pour l’instant, j’ai laissé hide() et show(), en enlevant le ‘slow’ car l’effet me parait moins vilain que sans eux.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
function Photo(titre, source, vigWidth, vigHeight, imgWidth, imgHeight) {
    this.titre = titre;
    this.source = source;
    this.vigWidth = vigWidth;
    this.vigHeight = vigHeight;
    this.imgWidth = imgWidth;
    this.imgHeight = imgHeight;
    this.dossierVig = "vignette/";
    this.dossierImg = "images/";
    this.affiche = function(){
        $("#photoCentre").hide();
        
        $("#photoCentre").attr({
            src: this.dossierImg + this.source,
            width: this.imgWidth,
            height: this.imgHeight,
            alt: this.titre,
            title: this.titre
        });
        
        $("#photoCentre").show();
    };
}

var nombreVignettesGauche = 11;
var vignetteGaucheArray = new Array(nombreVignettesGauche);

//index de 0 à nombreVignettes - 1
vignetteGaucheArray[0] = new Photo("Cuisine (photo n° 9)", "cuisine09.jpg", 160, 120, 600, 450);
vignetteGaucheArray[1] = new Photo("Cuisine (photo n° 10)", "cuisine10.jpg", 160, 120, 600, 450);
vignetteGaucheArray[2] = new Photo("Cuisine (photo n° 11)", "cuisine11.jpg", 160, 120, 600, 807);
vignetteGaucheArray[3] = new Photo("Cuisine (photo n° 5)", "cuisine05.jpg", 160, 121, 600, 454);
vignetteGaucheArray[4] = new Photo("Cuisine (photo n° 3)", "cuisine03.jpg", 160, 127, 600, 476);
vignetteGaucheArray[5] = new Photo("Cuisine (photo n° 6)", "cuisine06.jpg", 160, 212, 600, 795);
vignetteGaucheArray[6] = new Photo("Cuisine (photo n° 7)", "cuisine07.jpg", 160, 121, 600, 454);
vignetteGaucheArray[7] = new Photo("Cuisine (photo n° 8)", "cuisine08.jpg", 160, 219, 600, 823);
vignetteGaucheArray[8] = new Photo("Cuisine (photo n° 2)", "cuisine02.jpg", 160, 131, 600, 493);
vignetteGaucheArray[9] = new Photo("Cuisine (photo n° 1)", "cuisine01.jpg", 160, 120, 600, 451);
vignetteGaucheArray[10] = new Photo("Cuisine (photo n° 4)", "cuisine04.jpg", 160, 106, 600, 398);

var nombreVignettesDroite = 9;
var vignetteDroiteArray = new Array(nombreVignettesDroite);

//index de 0 à nombreVignettes - 1
vignetteDroiteArray[0] = new Photo("Cuisine (photo n° 18)", "cuisine18.jpg", 160, 120, 600, 450);
vignetteDroiteArray[1] = new Photo("Cuisine (photo n° 17)", "cuisine17.jpg", 160, 213, 600, 800);
vignetteDroiteArray[2] = new Photo("Cuisine (photo n° 16)", "cuisine16.jpg", 160, 213, 600, 800);
vignetteDroiteArray[3] = new Photo("Cuisine (photo n° 15)", "cuisine15.jpg", 160, 120, 600, 450);
vignetteDroiteArray[4] = new Photo("Cuisine (photo n° 14)", "cuisine14.jpg", 160, 120, 600, 450);
vignetteDroiteArray[5] = new Photo("Cuisine (photo n° 13)", "cuisine13.jpg", 160, 126, 600, 474);
vignetteDroiteArray[6] = new Photo("Cuisine (photo n° 12)", "cuisine12.jpg", 160, 120, 600, 450);
vignetteDroiteArray[7] = new Photo("Cuisine (photo n° 19)", "cuisine19.jpg", 160, 115, 600, 430);
vignetteDroiteArray[8] = new Photo("Cuisine (photo n° 20)", "cuisine20.jpg", 160, 101, 600, 379);

function afficherImgGauche(thisImg) {
    var id = $(thisImg).attr("id");
    var i =  id.slice(5);    // Pour éliminer le mot image et garder uniquement le numero de la photo.
    
    vignetteGaucheArray[i].affiche();
}

function afficherImgDroite(thisImg) {
    var id = $(thisImg).attr("id");
    var i =  id.slice(5);    // Pour éliminer le mot image et garder uniquement le numero de la photo.
    
    vignetteDroiteArray[i].affiche();
}

function construitImgGauche(){
    for(i=0; i < nombreVignettesGauche; i++) {
        $("<a href='#top'><img class='deco' id='image" + i + "' /></a>").appendTo("#gauche");
    }
    
    for(i=0; i < nombreVignettesGauche; i++) {
        $("#image" + i).attr({
            src: vignetteGaucheArray[i].dossierVig + vignetteGaucheArray[i].source,
            width: vignetteGaucheArray[i].vigWidth,
            height : vignetteGaucheArray[i].vigHeight,
            alt: vignetteGaucheArray[i].titre,
            title: vignetteGaucheArray[i].titre
        });
    }
}

function construitImgDroite(){
    for(i=0; i < nombreVignettesDroite; i++) {
        $("<a href='#top'><img class='deco' id='image" + i + "' /></a>").appendTo("#droite");
    }
    
    for(i=0; i < nombreVignettesDroite; i++) {
        $("#image" + i).attr({
            src: vignetteDroiteArray[i].dossierVig + vignetteDroiteArray[i].source,
            width: vignetteDroiteArray[i].vigWidth,
            height : vignetteDroiteArray[i].vigHeight,
            alt: vignetteDroiteArray[i].titre,
            title: vignetteDroiteArray[i].titre
        });
    }
}

function construitImg(){
    $("#photoCentre").attr({
            src: vignetteDroiteArray[6].dossierImg + vignetteDroiteArray[6].source,
            width: vignetteDroiteArray[6].imgWidth,
            height: vignetteDroiteArray[6].imgHeight,
            alt: vignetteDroiteArray[6].titre,
            title: vignetteDroiteArray[6].titre
    });

    construitImgGauche();
    construitImgDroite();
    
    $("#gauche img").bind("click", function(){afficherImgGauche(this)});
    $("#droite img").bind("click", function(){afficherImgDroite(this)});
}

[danielhagnoul]

Bonsoir.

J'ai mal formulé ma question.

Il ne s'agit pas d'un problème de vitesse de chargement des images — type preloading comme pour un diaporama, mais du traitement des modifications du DOM réalisées par jQuery.

Le navigateur réagi-t-il à chaque ligne modifiée, charge-t-il image par image ou alors le navigateur réagi-t-il lorsque toutes les fonctions javascript sont finies et charge-t-il toutes les images en même temps.

Est-ce que la manière dont j'écris mes scripts, la manière dont je divise le code en différentes fonctions, influence le navigateur ?

[danielhagnoul]

Bonjour.

J'ai trouvé une amélioration grâce à : http://t-templier.developpez.com/tut...vascript-poo1/

Ce tutoriel, en 3 parties, est vraiment génial !

Merci Monsieur Thierry Templier.

Comme le problème d'efficacité des scripts semble n'intéresser personne je marque comme résolu, mais je continuerais à chercher des améliorations et à en profiter en solo.