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
 
}