I am using Knockout.js to display a list of search results returned from my server. Each result from the result set contains an image. I'm trying to attach a handler to the load event for each image so I can resize the image's parent div based on max height of all the images but the load event seems to be firing before the images have finished loading.

Furthermore, I can see the load handler is hit in firebug, but the act of debugging just gives the images time to load so everything works properly when debugging.

The load handler within my viewModel: This will push a resolved deferred into my promises array. Then all I have to do is check to make sure the array is full and that will tell me the images have loaded.

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

The binding for the load handler

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

The search function within my viewModel: This returns the json results, populates my observable array and then sets the height of each "thumbnail" by first checking to make sure the promises array is full, then when it is, gets the max height and sets all "thumbnails" to that height.

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

My question is: Why is the load event firing before the image load and how can I have the load event fire at the appropriate time?

UPDATE

My thought is that the load event may be firing prematurely because it's possible that it's attached after the image has it's src. I may have to create a custom binding if simply changing the order of the event bindings doesn't work.

I am using Knockout.js to display a list of search results returned from my server. Each result from the result set contains an image. I'm trying to attach a handler to the load event for each image so I can resize the image's parent div based on max height of all the images but the load event seems to be firing before the images have finished loading.

Furthermore, I can see the load handler is hit in firebug, but the act of debugging just gives the images time to load so everything works properly when debugging.

The load handler within my viewModel: This will push a resolved deferred into my promises array. Then all I have to do is check to make sure the array is full and that will tell me the images have loaded.

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

The binding for the load handler

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

The search function within my viewModel: This returns the json results, populates my observable array and then sets the height of each "thumbnail" by first checking to make sure the promises array is full, then when it is, gets the max height and sets all "thumbnails" to that height.

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

My question is: Why is the load event firing before the image load and how can I have the load event fire at the appropriate time?

UPDATE

My thought is that the load event may be firing prematurely because it's possible that it's attached after the image has it's src. I may have to create a custom binding if simply changing the order of the event bindings doesn't work.

• javascript
• event-handling
• knockout.js
• jquery-deferred

1 Answer 1

You may be able to fix the event binding problem simply by putting your event: data before the attr: data.

In any event (no pun intended) this line is wrong:

var promise = $.Deferred().resolve;

it creates a deferred, and then assigns promise as a reference to the resolve function, without invoking it.

When the resulting array is passed to $.when the bined promise is resolved immediately, since objects that don't themselves implement the promise interface are implicitly considered resolved.

You need to create the array of deferred objects (of the desired length) outside of the imageLoadHandler, and then explicitly call .resolve() on the appropriate deferred object at that point.