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();
    }
});

[Toufik83]

car pour l'instant, fold_menu() est lancée alors que les éléments ne sont pas encore supprimés

Et si tu met la fonction fold_menu() et la variable loaded dans le callback de fadeIn ?

Code :

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

1
2
3
4
5
6
7
8
9
 
slide_content.css('background-image', 'url("imgs/' + photo_name + '.jpg")')
.fadeIn(2000,function(){
   loaded++
    if (loaded === 3) {
        $(".invisible").remove();
        fold_menu();
    }
});

Comme ça, la variable loaded sera incrémentée chaque 2 secondes.

Mais jusqu'à maintenant j'avoue de ne pas avoir compris pourquoi tu ajoutes des <img /> au DOM pour les supprimer juste après ?
Pourquoi tu utilises .on("load") alors qu'un css("background-image") fera l'affaire ?

[NoSmoking]

Pourquoi tu utilises .on("load") alors qu'un css("background-image") fera l'affaire ?

Je pense que c'est pour simuler un préchargement mais ... !?!

Je ne sais pas si c'est suffisamment clair...

J'ai répondu sur un « point technique » mais pas forcément à la problématique que, je dois admettre, je ne saisie pas trop.

Un exemple en ligne serait le bien venu.

[UneMinute22]

Merci à vous deux pour vos réponses !

Et si tu met la fonction fold_menu() et la variable loaded dans le callback de fadeIn ?

Alors j'ai essayé : plus la "duration" du fadeIn est longue, moins l'effet de saccade est visible. Mais malheureusement je ne peux pas attendre 6sec au total (voire plus) pour afficher mon contenu, c'est bien trop long

Je pense que c'est pour simuler un préchargement mais ... !?!

Je pensais qu'en ajoutant l'image en mémoire de cette manière et en simulant le chargement, cela permettrait de déterminer quand le background aurait chargé afin d'afficher le contenu par la suite.

Malheureusement mon projet n'est pas en ligne, mais je viens de créer un fiddle qui pourrait peut-être vous aider à comprendre..?

Concrètement, je fais appel à une requête ajax lorsque l'on clique sur un lien, permettant de changer (entre autres) les 3 images en background de mon slider.
Ce qui me pose problème c'est la fonction unfold_menu qui est appelée à la fin de la requête mais qui n'est pas fluide en raison du chargement des images (j'imagine ?).

Je ne sais pas trop comment vous montrer tout ça, n'hésitez pas à me faire savoir si vous souhaitez que je vous repartage mon code..
Un peu bizarre mais j'ai également fait une petite vidéo de mon écran pour vous montrer si besoin : https://photos.app.goo.gl/PwTPcZ8CifvUUAYB7

Merci d'avance !