Liaison d'événement Knockoutjs à l'événement de chargement d'image

Question

J'utilise Knockout.js pour afficher une liste de résultats de recherche renvoyés par mon serveur. Chaque résultat de l'ensemble de résultats contient une image. J'essaie d'attacher un gestionnaire à l'événement de chargement de chaque image afin de pouvoir redimensionner la div parent de l'image en fonction de la hauteur maximale de toutes les images, mais l'événement de chargement semble se déclencher avant que les images aient fini de se charger.

De plus, je peux voir que le gestionnaire de chargement est activé dans firebug, mais le fait de déboguer donne simplement aux images le temps de se charger afin que tout fonctionne correctement lors du débogage.

Le gestionnaire de chargement dans mon viewModel : Cela va pousser un différé résolu dans mon tableau de promesses. Ensuite, tout ce que j'ai à faire est de vérifier que le tableau est plein et cela me dira que les images ont été chargées.

self.imageLoadHandler = function() {
    var promise = $.Deferred().resolve;
    promises.push(promise);
};

La liaison pour le gestionnaire de charge

<img data-bind="attr: { src: Posters.Detailed, alt: Title }, event: { load: $root.imageLoadHandler }" />

La fonction de recherche dans mon viewModel : Cela renvoie les résultats json, remplit mon tableau observable, puis définit la hauteur de chaque "thumbnail" en vérifiant d'abord que le tableau promises est plein, puis lorsqu'il l'est, obtient la hauteur maximale et définit toutes les "thumbnails" à cette hauteur.

self.search = function () {
    $.getJSON(arguments[0].action, { name: this.searchValue() }, function (data) {
        self.movies(data);
        setThumbnailHeight();
    });
};

var setThumbnailHeight = function() {
    var $items = $('.thumbnails li');
    $.when.apply($, promises).done(function() {
        var maxHeight = Math.max.apply(null, $items.map(function () {
            return $(this).height();
        }).get());
        $items.css('height', maxHeight);
    });
};

Ma question est la suivante : Pourquoi l'événement de chargement se déclenche-t-il avant le chargement de l'image et comment puis-je faire en sorte que l'événement de chargement se déclenche au moment opportun ?

UPDATE

Je pense que l'événement de chargement peut se déclencher prématurément parce qu'il est possible qu'il soit attaché après que l'image ait eu son "code". src . Je vais peut-être devoir créer une liaison personnalisée si le simple fait de changer l'ordre des liaisons d'événements ne fonctionne pas.

Answer 1

Vous pouvez peut-être résoudre le problème de la liaison d'événement en mettant simplement vos event: données avant le attr: données.

Quoi qu'il en soit (sans jeu de mots), cette ligne est fausse :

var promise = $.Deferred().resolve;

il crée un différé, puis attribue promise comme référence à la resolve sans l'invoquer.

Lorsque le tableau résultant est transmis à $.when la promesse combinée est résolue immédiatement, puisque les objets qui n'implémentent pas eux-mêmes la fonction promise sont implicitement considérés comme résolus.

Vous devez créer le tableau d'objets différés (de la longueur souhaitée) en dehors de l'objet imageLoadHandler et ensuite appeler explicitement .resolve() sur l'objet différé approprié à ce moment-là.