Animations Jquery non fluide après chargement de données grâce à Ajax
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:
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:
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
} |
