Evénement load, images et requêtes ajax [Résolu]

[eckerdecker]

Bonjour,

Cela fait maintenant un bon moment que je farfouille, que je test, que je me creuse la tête, pour trouver un moyen simple de gérer un évènement load sur le contenu d'une réponse ajax. Pour l'instant sans résultat probant. Alors je me tourne vers vous.

Je vous détail ma réflexion :
- J'ai besoin de faire des traitements sur des images présentes dans ma page
- Sur une requête synchrone pas de souci, je le fait sur le $(window).load() et tout va bien.
- Sur une requête asynchrone ça se corse, je peux éventuellement le faire dans le success de la requête mais rien ne me permet de savoir si les images qui ont été ajoutées au DOM sont déjà chargées
- J'ai essayé avec $('img').load() mais ce n'est pas supporté par tous les navigateurs, des problèmes peuvent survenir si l'image était en cache, IE ne les envoie jamais, bref c'est pas bon
- $('img').load() fonctionne un peu mieux je crois quand il est ajouté sur une balise image sans src et que la source est renseignée après, mais je voudrais pouvoir ajouter ma réponse ajax au DOM sans m'em***der à remplir chaque balise img après coup
- J'ai essayé avec un plugin qui ajoute un évènement spécial load pour les images, mais je me choppe un "stack overflow" sur IE

J'enrage, je me dit que je ne dois pas être le seul à vouloir faire un traitement onload sur une réponse ajax, le success étant incomplet pour tout ce qui est image par exemple, mais impossible de trouver une solution concrète, simple et cross-browser.

Si vous avez ce même souci, et que vous avez une solution ou une piste, ça m’intéresse ^^

[Bovino]

Euh... tu sembles mélanger plusieurs choses...

Sur une requête synchrone pas de souci, je le fait sur le $(window).load() et tout va bien.

Quel rapport entre une requête AJAX synchrone et l'événement load de window ?

Sur une requête asynchrone ça se corse, je peux éventuellement le faire dans le success de la requête mais rien ne me permet de savoir si les images qui ont été ajoutées au DOM sont déjà chargées

Là encore, je vois pas trop le rapport... Au moment du success, aucun élément n'a été ajouté au DOM tu peux donc être certain qu'aucune image n'a été chargée

J'ai essayé avec $('img').load() mais ce n'est pas supporté par tous les navigateurs, des problèmes peuvent survenir si l'image était en cache, IE ne les envoie jamais, bref c'est pas bon

Pas tout compris... tu parles bien de load() ?

$('img').load() fonctionne un peu mieux je crois quand il est ajouté sur une balise image sans src et que la source est renseignée après, mais je voudrais pouvoir ajouter ma réponse ajax au DOM sans m'em***der à remplir chaque balise img après coup

Ben si tu veux ajouter une action au chargement de l'image, il faudra bien la coder à un moment ou un autre non ? Ensuite, oui il est préférable de préciser l'action de l'événement avant l'insertion dans le DOM (pour éviter que l'événement soit déclenché avant qu'il ne soit défini si l'image est en cache) mais la délégation d'événement permet de gérer ça facilement avec jQuery.

le success étant incomplet pour tout ce qui est image par exemple

Encore une fois, le success signifie uniquement que la réponse a été reçue, aucune insertion dans le DOM n'a encore été effectuée...

[eckerdecker]

Navré j'ai pris quelque raccourci dans mes explications

Quand je parle de requête synchrone je parle simplement d'une page standard chargée complètement et normalement après une requête http (et non une requête ajax en mode synchrone) et qui contient des images sur lesquels je veut effectuer des traitements, notamment par rapport à leur largeur/hauteur, ce qui nécessite qu'elles soient chargées, dans ce cas là je fais mon traitement ainsi :

Code :

1
2
3
4
5
6
7
$(function(){
  $(window).load(function(){
    $('.selecteur img').each(function(){
      //traitement
    });
  });
});

... et tout va bien

Je veux que le même traitement soit effectué sur des images qui arriveraient dans le DOM lors d'une requête ajax : dans mon success je met à jour la partie de ma page qui contient ces images avec le contenu html de la réponse, j'ai donc bien de nouvelles images dans mon DOM mais je n'ai aucun moyen de savoir quand elles seront chargées, donc aucun moyen de savoir si mon traitement va correctement s'effectuer ou pas.

Pour ce qui est de mettre l'écouteur avant l'insertion dans le DOM, faire un

Code :

1
2
3
$('.selecteur img').live('load',function(){
  //traitement
})

ne marche pas (j'ai essayé) donc je suis bien obligé de mettre à jour mon DOM et de faire un bind après. Mais ça ne marche pas correctement sur tous les navigateurs, donc, comme je l'ai dit, remplir l'attribut src après est une des solutions, mais je ne considère pas ça comme une solution simple, d'autant qu'en synchrone ou asynchrone j'utilise les mêmes templates pour rendre ma page, dans lesquels les attributs src sont déjà renseignés. Cela impliquerait de boucler sur chaque image pour vider l'attribut src, poser l'écouteur, re-remplir l'attribut src. Et encore une dernière chose j'ai lu que même avec ce mécanisme certain navigateur n'envoyait pas l'évènement load si l'image était présente dans le cache.

Bref, je cherche un moyen simplissime et cross-browser d'être informé que les images (ou tout autre contenu qui dans le cas d'une requête http classique provoque cette latence entre l'évènement DOMready et l'évènement load) contenues dans une mise à jour du DOM sont bel et bien chargées.

[eckerdecker]

mais la délégation d'événement permet de gérer ça facilement avec jQuery.

Je viens de tilter sur cette partie de ta réponse (rapide d'ailleurs, je t'en remercie) qui ne m'avait pas frappée au premier abord, je manque surement de savoir faire à ce niveau, c'est peut-être ce que je cherche, peux tu m'en dire plus quant à ce que ça pourrait m'apporter ?

Merci d'avance

[eckerdecker]

Bon, visiblement cela ne peut pas être simple, donc je me tourne vers un plugin (https://github.com/desandro/imagesloaded), cela a au moins le mérite d'être simple d'utilisation.

Sinon pour ce qui est de la délégation je crois avoir compris que la méthode live() en est une implémentation, son application à l'évènement load est des plus hasardeux, je ne sais pas ce qu'il en est pour la méthode delegate(), je me pencherai sur la question une autre fois

[SpaceFrog]

cf aussi on()