Discussion :

[UneMinute22]

Bonjour,

J'ai un menu (qui s'affiche au hover) avec des liens faisant appel à Ajax pour récupérer des données et en particulier des images en background.
Ce menu est censé reprendre sa place originale (grâce à un changement de hauteur de div) lorsque le contenu est entièrement chargé.
Malheureusement l'animation n'est pas fluide du tout, même quand les images sont déjà dans le cache. Elle l'est en revanche si on clique sur le lien menant au contenu déjà sur la page.

J'ai essayé de modifier mon appel de fonction en faisant un callback, en l'appelant depuis le click etc etc mais rien n'y fait..
Est-ce que quelqu'un saurait comment résoudre ce problème ? Merci d'avance et bonne journée

Voici une partie de mon code :

Code Javascript :

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
 
function fetch_Data(arg1, arg2) {
 
    $.ajax({
    type: "GET",
    dataType: "json",
    url: "fetch.php",
    data: 'arg1=' + arg1+ '&arg2=' + arg2,
    success:function(data)
    {
        populate_html(data)
    }
    });
 
}
 
function populate_html(data) {
 
    var loaded = 0;
 
    $.each(data, function(key, value) { 
 
    //ajoute ici des données au DOM
 
    slide_content.hide(); 
    $('<img/>').attr('src', 'imgs/' + photo_name + '.jpg').on('load', function() {
    $(this).remove();
    slide_content.css('background-image', 'url("imgs/' + photo_name + '.jpg")').fadeIn(2000); 
 
    loaded++
 
        // j'ai 3 images à charger
        if (loaded === 3) {
        fold_menu();
        }
 
    });
 
});
    }

Code Javascript :

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

1
2
3
4
5
6
7
8
 function fold_menu() {  
 
      $('.menu').css("height", "...px");    
      $('.title').css("height", "...px"); 
 
      //autres animations qui ne semblent pas poser de problèmes
 
}

[abdennour bouaicha]

pour l'animation c'est mieux mettre la méthode animate:

Code :

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

$('div').animate({height: '+=50'}, 2000);

au lieu de $("").css()

[UneMinute22]

Merci pour votre réponse ! C'est légèrement mieux mais toujours pas totalement fluide..

Ce qui me surprend c'est que l'animation est parfaitement fluide si le contenu ne change pas mais que la requête est bien faite.
Est ce que ça pourrait être lié à du contenu qui continue de charger ?

[abdennour bouaicha]

en effet on peut imaginer l'ajax comme un moyen de transport entre serveur et client , et son contenu html + css est la marchandise ,alors cette dernière si elle n'est pas bien emballé elle sera perdus dans le chemin , se qui conseillé dans le développement web toujours la totalité du code pour un menu ou un autre bloc doit être dans html et css et si on est pas besoin de ce bloc on le cache par une classe css .invisible{width:0} alors le javascript fait rien que l'animation pour qgrandir le width et supprimer a la fin la classe du menu

Code :

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

1
2
 
$("menu").animate("width",2000).removeClass("invisible");

[UneMinute22]

Mon souci est qu'en faisant un hover sur le menu, celui-ci recouvre l'intégralité du contenu (grâce à une animation sur sa height) puis est censé reprendre sa taille d'origine au click sur un des liens, donc après la requête Ajax et le chargement du contenu dans mon html (permettant ainsi de laisser apparaître le nouveau contenu).
Le menu n'est pas censé disparaître.

L'animation qui permet au contenu de réduire le div du menu n'est fluide ni lorsque les images sont nouvellement chargées, ni lorsqu'elles ont déjà été chargées auparavant. Par contre elle l'est si la requête a déjà été faite et le contenu est toujours affiché. Je ne sais pas si c'est suffisamment clair...

Sauriez-vous à quoi cela pourrait être lié ? Merci d'avance

[NoSmoking]

Bonjour,

il faut savoir qu'il y a, pour faire simple, plusieurs étapes avant affichage d'une image dans la page

• Etape #1, c'est le chargement et donc le « flux » des données est récupéré et mis en mémoire ;
• Etape #2, les données sont décodées pour être préparées pour l'affichage.

Ce qu'il faut également savoir c'est que ne sont « décodées » que ce qui doit être affiché et donc qui appartient au DOM.
Dans ton cas

Code :

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

1
2
3
$('<img/>').attr('src', 'imgs/' + photo_name + '.jpg').on('load', function() {
      $(this).remove();
      slide_content.css('background-image', 'url("imgs/' + photo_name + '.jpg")').fadeIn(2000);

tu crées une image que tu ne lies pas au DOM et comme tu la détruis à peine chargée les données ne sont pas prêtes et au pire à recharger.


On en a parlé dans cette discussion : https://www.developpez.net/forums/d1...ge-background/

[UneMinute22]

Merci mille fois pour cette réponse !

J'ai bien lu la discussion (très intéressante soit dit en passant).
Je n'ai pour l'instant par retenue la solution du Image.decode (par souci de compatibilité) donc j'ai conservé mon load puis tenté de lier mon image au DOM.

Mais je n'arrive pas à savoir quand supprimer les nouveaux div car pour l'instant, fold_menu() est lancée alors que les éléments ne sont pas encore supprimés, ce qui rend évidemment le tout encore moins fluide.

Auriez-vous une suggestion sur comment procéder ? Désolée, mes connaissances manquent largement ici...
Merci d'avance

Code Javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
slide_content.hide(); 
$('<img/>').attr('src', 'imgs/' + photo_name + '.jpg').on('load', function() { 
    var new_div = $("<div>", {"class": "invisible"}); 
    $(this).appendTo(new_div);
    $(new_div).appendTo("body");
 
    slide_content.css('background-image', 'url("imgs/' + photo_name + '.jpg")').fadeIn(2000); 
    loaded++
 
    if (loaded === 3) {
        $(".invisible").remove();
        fold_menu();
    }
});