IPB

Bienvenue invité ( Connexion | Inscription )

 
Reply to this topicStart new topic
> Utiliser onload sur une div
Options
Anard
posté 9 Mar 2019, 16:15
Message #1


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 584
Inscrit : 7 May 2015
Membre no 195 224



Bonjour,

Je cherche à executer une action après chargement complet d'une div, comme ça se fait pour la balise body.
Je m'explique : sur un site en développement, je propose une galerie photos. Il faut cliquer sur un album pour charger les miniatures des photos qu'il contient par AJAX (par sécurité, un lien direct charge la page complète finale au cas où Javascript serait désactivé).

Au départ, Javascript affiche une icône "chargement" et les miniatures sont grisées. Quand il reçoit la réponse de PHP, les photos réapparaissent normalement et l'icône "chargement" disparait. Mais, en tout cas chez moi avec une connexion digne des années 90, les photos n'apparaissent pas encore, elles restent à charger.
Dans l'idéal, j'aurais aimé que ceci n'intervienne qu'une fois que les photos contenues dans la div sont entièrement chargées.
Malheureusement, l'évènement onload n'est applicable qu'au body ou aux éléments externes (img, iframes, script, style, etc).
J'ai pensé appliquer le script onload sur la dernière image du lot, mais ce n'est pas forcément celle qui sera finie de charger en dernier.

Connaîtriez-vous un moyen de parvenir à mes fins ?

Merci beaucoup pour votre aide.

Ce message a été modifié par Anard - 9 Mar 2019, 16:20.


--------------------
"iMack" : GA-H97M-D3H, Intel i5 4460, 16Go DDR3, Asus GTX670, SSD 128+120+60Go, HDD 500Go+2To / Clover - macOS Mojave / Ubuntu Bionic Beaver / Windows 10
"Portable" : Samsung P200, Intel Core2Duo T8100, 3Go DDR2, Radeon X1250, HDD 160Go / Grub2 - SliTaz 5.0 rolling / Windows 10
Go to the top of the page
 
+Quote Post
Philippe64
posté 9 Mar 2019, 17:03
Message #2


Adepte de Macbidouille
*

Groupe : Membres
Messages : 247
Inscrit : 31 Aug 2002
Lieu : Saint-Jean-de-Luz
Membre no 3 355



Ton site avances bien !
Tu pourrais mettre tes images avec un un système de lazy loading, du coup tu charges ton contenu via ajax avec juste une image de remplacement pour patienter (un gif par exemple). Une fois que ton ajax est chargé tu demandes le chargement des images (via ton script de lazy loading) qui se fera en douceur avec par exemple un petit effet de fondu.
(par exemple : http://jquery.eisbehr.de/lazy/)

par exemple, quand tu charges un bout de code avec une image, au lieu de faire :
<img src="images/1.jpg" />
tu fais :
<img class="lazy" data-src="images/1.jpg" />

et quand c'est chargé, tu actives le téléchargement des images via le script de lazy loading.



--------------------
En activité : Macbook pro 13" Core I5 à 2.5Ghz - Macbook pro 15" Core duo de 2006 qui marche toujours hyper bien - iPhone SE - iPad - iPad Mini
En Panne : Imac 27 Pouces Core I7 à 3.4Ghz - mid 2011 (je cherche un écran)
A la retraite : Imac C2D 24 Pouces (blanc) à 2.33 Ghz - iBook14" 800 Mhz - Quicksilver 733 - G3 bleu et blanc - Macintosh Classic - iPhone 3G - iPhone 4s

Crea64 : creation de site internet à Saint-Jean-de-Luz (64)
Go to the top of the page
 
+Quote Post
Anard
posté 9 Mar 2019, 19:42
Message #3


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 584
Inscrit : 7 May 2015
Membre no 195 224



Merci à toi.
Citation
Ton site avances bien !
Heureusement que la graphiste est passée par là wink.gif

Je n'aime pas trop jQuery (enfin surtout je ne connais pas du tout, et j'ai déjà bien du mal à ne pas me perdre entre tous ces "interlocuteurs" imbriqués les uns dans les autres (HTML, CSS, PHP et JS). Dur de garder la tête bien rangée (ça doit d'ailleurs se voir dans mon code wink.gif )
Après, de ce que j'ai compris, jQuery n'est qu'une extension de Javascript. La même chose doit pouvoir être obtenue en JS pur (à moi de chercher wink.gif )
En tout cas merci pour la piste, je ne connaissais déjà pas cet attribut "data-src" qui en effet peut-être bien pratique pour ce genre de choses. Est-ce que le chargement de l'image sur l'ordinateur du client commence dès que je met un fichier valide dans "data-src" ou est-ce que ce n'est que sémantique ?

Je vais continuer à fouiner mais si je comprends bien, je n'ai pas trop d'autre choix que de me fier aux onload des images elles-mêmes.

En fait pour le moment ma technique consiste à charger en Ajax directement l'ensemble de la div "miniatures", ce que je trouve assez simple à mettre en œuvre. J'aimerais quand même rester sur un gif "chargement" unique, mais le principe reste identique.
En réfléchissant très rapidement, je pensais utiliser une variable globale dans mes scripts JS photosRestantes qui prend la valeur du nombre de photos à charger dès la réponse PHP à ma requête Ajax.
Chaque photo disposerait d'un genre de truc comme ça:
Code
onload=function() {
    photosRestantes--;
    this.src = this.data-src; // avec effet de transition magnifique !!!
    this.data-src = "";
    if (!photosRestantes) {
        document.getElementById('chargement').style.visibility = 'hidden';
        document.getElementById('miniatures').style.opacity = '1.0'; // idem avec transistion magnifique :D
    }
}

Mais je me demande si ce n'est pas un peu bourrin biggrin.gif, j'évite d'habitude les variables globales

J'aurais une seconde question tant que je suis ici :
Dans d'autres parties du site, j'utilise le même type de chargement Ajax, mais j'aimerais parfois interdire un clic pendant le chargement.
Y a-t-il une propriété qui puisse faire ça ? J'utilise disabled=true sur les formulaires, mais j'ai l'impression que ça ne fonctionne pas sur le reste de la page...

Ce message a été modifié par Anard - 9 Mar 2019, 19:47.


--------------------
"iMack" : GA-H97M-D3H, Intel i5 4460, 16Go DDR3, Asus GTX670, SSD 128+120+60Go, HDD 500Go+2To / Clover - macOS Mojave / Ubuntu Bionic Beaver / Windows 10
"Portable" : Samsung P200, Intel Core2Duo T8100, 3Go DDR2, Radeon X1250, HDD 160Go / Grub2 - SliTaz 5.0 rolling / Windows 10
Go to the top of the page
 
+Quote Post
Anard
posté 10 Mar 2019, 18:16
Message #4


Macbidouilleur d'argent !
***

Groupe : Membres
Messages : 584
Inscrit : 7 May 2015
Membre no 195 224



Bien. J'ai peur de ne pas avoir bien compris du coup... unsure.gif

Le tag "data-src" ne veut en fait rien dire de spécial pour le navigateur d'après ce que j'ai pu lire. Donc les url qui sont à l'intérieur ne sont en fait pas chargées du tout, sauf quand JS fera son travail pour replacer le chemin dans l'attribut "src".
Bien que 99% des utilisateurs aient probablement Javascript d'activé, je considère l'accessibilité comme primordiale et ne veux surtout pas limiter le rendu si JS n'était pas activé. Les scripts ne me servent qu'à apporter des effets et éviter le chargement d'une page complète quand on clique sur un lien qui ne fera que remplacer une "div". Comme je disais chaque fonction javascript est écrite comme ceci :
Code
<a onclick="fonctionJavascript(); return false;" href="lienDirect.php">

Ainsi, si Javascript n'est pas activé (ou s'il y a une erreur dans mon code JS wink.gif), le lien vers la page brute devient actif et l'utilisateur final ne verra pas vraiment la différence.

Du coup, j'ai opté pour cette solution. Sachant que la galerie est constituée comme ceci :
Code
<!-- Liste des albums -->
<div class="albums">
    <div class="photo">Premier album</div>
    [...]
    <div class="photo">Dernier album</div>
</div>
<!-- Miniatures -->
<div class="photos">
    <div class="photo">Première photo</div>
    [...]
    <div class="photo">Dernière photo</div>
</div>


  • Au clic sur un album, je commence par afficher le gif de chargement et mettre ma div "photos" (toutes les miniatures) en opacité 0,2
  • Lors de la réponse PHP, je peux savoir combien j'ai de photos dans l'album. Je repasse la div "photos" en opacité 1 et je met les miniatures une par une en opacité 0,2 avec une boucle sur document.getElementById('photos').getElementByClassName('photo'). Ca ne change rien visuellement par rapport à l'étape précédente, mais maintenant les miniatures sont opacifiées de manière indépendantes. Au passage les images passent en opacité 0 car c'est elles qui disposent d'un effet de transition et non leur conteneur (question esthétique uniquement) et je leur met un attribut "data-loaded" = "false"
  • Au onload d'une image, je retire les précédents attributs d'opacité sur cette image et son conteneur par removeProperty et je passe son attribut "data-loaded" à "true".
  • Je boucle à nouveau sur les miniatures jusqu'à trouver un "data-loaded" = "false". Si je n'en trouve pas, je masque mon gif chargement


Je trouve l'effet final assez joli, et un navigateur sans script affichera la page normalement sans les effets de transition.
Mais vu que je ne suis pas très au point, si je réinvente trop la roue ou si je me complique trop la tâche, je suis preneur d'astuces wink.gif

Merci beaucoup. C'est toujours ici Euh… pour le contenu, c'est les premières photos que j'ai trouvé sur mon ordi. Cette partie, ce ne sera pas mon taf wink.gif


--------------------
"iMack" : GA-H97M-D3H, Intel i5 4460, 16Go DDR3, Asus GTX670, SSD 128+120+60Go, HDD 500Go+2To / Clover - macOS Mojave / Ubuntu Bionic Beaver / Windows 10
"Portable" : Samsung P200, Intel Core2Duo T8100, 3Go DDR2, Radeon X1250, HDD 160Go / Grub2 - SliTaz 5.0 rolling / Windows 10
Go to the top of the page
 
+Quote Post
No6
posté 10 Mar 2019, 23:27
Message #5


Oui ?
*****

Groupe : Membres
Messages : 3 889
Inscrit : 24 Jun 2003
Lieu : BZH
Membre no 8 224



Citation
Je n'aime pas trop jQuery (enfin surtout je ne connais pas du tout, et j'ai déjà bien du mal à ne pas me perdre entre tous ces "interlocuteurs" imbriqués les uns dans les autres (HTML, CSS, PHP et JS). Dur de garder la tête bien rangée (ça doit d'ailleurs se voir dans mon code wink.gif )
Après, de ce que j'ai compris, jQuery n'est qu'une extension de Javascript. La même chose doit pouvoir être obtenue en JS pur (à moi de chercher wink.gif )


la fonction nouvelle, et équivalente en JavaScript c'est le Fetch => https://developer.mozilla.org/fr/docs/Web/A...API/Using_Fetch

qui même si elle est indiquée comme expérimentale est maintenant utilisable sur tous les navigateurs => https://caniuse.com/#search=fetch

pour s'asurrer d'une compatibilité absolue il faut ajouter le PolyFill indiqué sur la page MDN.

---

Pour que tu comprenne mieux ton probleme : les commandes Ajax sont asynchrone.
ce qui signifie; pour ce type de fonctions, qu'entre le moment ou elle sont lancées et le moment ou elles ont une réponse (qui généralement prend du temps) l'interpréteur JS n'attend pas les bras croisés que la fonction en ai terminé avant de passer à autre chose, s'il y a du code à faire par la suite, alors il le traite tout de suite et c'est un process à part qui se chargera de faire le traitement demandé lorsque que la réponse arrivera.

Pour gérer les questions de synchronisation autour de différents appels asynchrones, il faut utiliser les mécanismes des promesses, ce que jQuery ne fait pas , car il procède par callBack, qui reste limité (comme le fait le Fetch à la base, mais avec un chainage).
https://developer.mozilla.org/fr/docs/Web/J...r_les_promesses

Ce message a été modifié par No6 - 10 Mar 2019, 23:49.


--------------------
"Je sais que vous croyez comprendre ce que vous pensez que j'ai dit, mais je ne suis pas sûr que vous réalisiez que ce que vous avez entendu n'est pas ce que je pense."
(Alan Greenspan)
Go to the top of the page
 
+Quote Post

Reply to this topicStart new topic
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 



Nous sommes le : 20th October 2019 - 15:37