Discussion :

[Tron01]

Bonjour à tous,

Je suis en train de modifier une application jquery qui me permet de créer un e-book, l’outil ce nomme Bookblock http://tympanus.net/codrops/2012/09/...t-flip-plugin/.
Actuellement j'ai inséré des vidéos dans mes différentes pages, mais je me rend compte que Firefox utilise bien trop de mémoire pour charger les pages. (je n'ai pas de problème avec Chrome ou Opéra quoi que ça utilise quand même pas mal de mémoire, mais pas autant que sous Firefox).
Firefox semble charger mes différentes vidéos dans la ram, et à chaque changement de page, il continu à charger de nouveau les vidéos, jusqu'au plantage du programme.
Si je retire les vidéos, je n'ai plus de soucis au niveau de la mémoire.
En regardant le gestionnaire des tâches et la console de firebug, je pense avoir trouvé une partie de mon problème

Voici une partie de la fonction qui permet de charger et d'afficher le contenu des pages

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
_layout: function(dir) {
            var self = this,
                // basic structure:
                // 1 element for the left side.
                $s_left = this._addSide('left', dir),
                // 1 element for the flipping/middle page
                $s_middle = this._addSide('middle', dir),
                // 1 element for the right side
                $s_right = this._addSide('right', dir),
                // overlays
                $o_left = $s_left.find('div.bb-overlay'),
                $o_middle_f = $s_middle.find('div.bb-flipoverlay:first'),
                $o_middle_b = $s_middle.find('div.bb-flipoverlay:last'),
                $o_right = $s_right.find('div.bb-overlay'),
                speed = this.end ? 400 : this.options.speed;
            this.$items.hide();
 
            this.$el.prepend($s_left, $s_middle, $s_right);

Les variables $s_left $s_middle $s_right contiennent des objets, qui sont le contenu de mes différentes pages.
La mémoire alloué augmente de 40-50mo à chaque passage sur la fonction _addSide.

Voici la fonction _addSide, qui sélectionne le contenu des pages en fonction du type de clique.

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
_addSide: function(side, dir) {
        var $side;
 
        switch (side) {
 
        case 'left':
 
            $side = $('<div class="bb-page"><div class="bb-back"><div class="bb-outer"><div class="bb-content" style="width:' + this.elWidth + 'px"><div class="bb-inner">' + (dir === 'next' ? this.$current.html() : this.$nextItem.html()) + '</div></div><div class="bb-overlay"></div></div></div></div>').css('z-index', 102);
            break;
 
        case 'middle':
            $side = $('<div class="bb-page"><div class="bb-front"><div class="bb-outer"><div class="bb-content" style="left:' + (-this.elWidth / 2) + 'px;width:' + this.elWidth + 'px"><div class="bb-inner">' + (dir === 'next' ? this.$current.html() : this.$nextItem.html()) + '</div></div><div class="bb-flipoverlay"></div></div></div><div class="bb-back"><div class="bb-outer"><div class="bb-content" style="width:' + this.elWidth + 'px"><div class="bb-inner">' + (dir === 'next' ? this.$nextItem.html() : this.$current.html()) + '</div></div><div class="bb-flipoverlay"></div></div></div></div>').css('z-index', 103);
            break;
 
        case 'right':
 
            $side = $('<div class="bb-page"><div class="bb-front"><div class="bb-outer"><div class="bb-content" style="left:' + (-this.elWidth / 2) + 'px;width:' + this.elWidth + 'px"><div class="bb-inner">' + (dir === 'next' ? this.$nextItem.html() : this.$current.html()) + '</div></div><div class="bb-overlay"></div></div></div></div>').css('z-index', 101);
            break;
 
        }
        return $side;
 
    }

Maintenant, je n'arrive pas à comprendre pourquoi et comment les données de la page précédente sont stockées, malgré le changement de page.
Est-ce au niveau de la sélection du contenu à insérer dans les pages ?
Jquery met-il mes vidéos dans des variables, qu'il ne supprime pas ?

Merci d'avance pour vos réponses.

[SpaceFrog]

Quand tu parles de chargement de page , tu parles de celle du book ?
il charge les videos par ajax... tu reste donc sur la page principale sans rechargement, tout se charge donc sur la même page

[Tron01]

Merci pour ta réponse SpaceFrog.

Quand tu parles de chargement de page , tu parles de celle du book ?

Oui je parle bien du book.
J'avoue que je débute en jquery et Ajax, y'aurait-il un moyen de décharger ce qui ne m’intéresse plus au fur et à mesure?

[SpaceFrog]

pas à ma connaissance.
un remove enlèverait l'objet du flux de la page mais pas de la mémoire

[Tron01]

Je suis étonné qu'il n'y est aucun moyen de supprimer la mémoire alloué:
J'avais fait un:

Code :

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

 $('video').remove();

, ce qui me supprime bien entendu toutes mes vidéos, mais libère aussi la mémoire.
Le problème c'est que je me retrouve sans aucune vidéo à la fin, et il faut recharger la page web pour revenir à l'état initial.

[SpaceFrog]

soit plus selectif au niveau du selecteur jquery ...