我正在使用Knockout.js来显示从服务器返回的搜索结果列表。结果集中的每个结果都包含一张图片。我试图为每个图像附加一个加载事件处理程序,以便基于所有图像的最大高度调整图像的父div大小,但是load事件似乎在图像完成加载之前触发。
此外,我可以在Firebug中看到加载处理程序被触发,但是调试的过程中会给图像足够的时间来加载,因此一切正常。
viewModel中的加载处理程序:这将向我的promises数组推送已解决的deferred对象。然后,我只需检查数组是否完整即可确定图像是否已加载。
此外,我可以在Firebug中看到加载处理程序被触发,但是调试的过程中会给图像足够的时间来加载,因此一切正常。
viewModel中的加载处理程序:这将向我的promises数组推送已解决的deferred对象。然后,我只需检查数组是否完整即可确定图像是否已加载。
self.imageLoadHandler = function() {
var promise = $.Deferred().resolve;
promises.push(promise);
};
加载处理程序的绑定
<img data-bind="attr: { src: Posters.Detailed, alt: Title }, event: { load: $root.imageLoadHandler }" />
在我的viewModel中的搜索功能: 这个功能返回JSON结果,填充我的可观察数组,然后通过首先检查承诺数组是否满了来设置每个“缩略图”的高度,当承诺数组满了时获取最大高度并将所有“缩略图”设置为该高度。
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);
});
};
我的问题是: 为什么加载事件会在图片加载之前触发,如何使加载事件在适当的时间触发?
更新
我认为加载事件可能会过早触发,因为可能是在图片有其src
之后才附加它。如果仅仅改变事件绑定的顺序不起作用,我可能需要创建自定义绑定。