How to show image loading using knockout.js

Question

I use knockout to link a list of images. What is the best way to set the spinner's background when loading images. I have a spinner class that I can set and undo on a background image, but I wonder if there is an easy way to bind images to a full event using knockout.js.

Answer 1

using jQuery UIs little spinner thing, I have a binding handler like

ko.bindingHandlers.Loading = { update: function (element, valueAccessor, allBindingsAccessor) { var value = valueAccessor(), allBindings = allBindingsAccessor(); var valueUnwrapped = ko.utils.unwrapObservable(value); if (valueUnwrapped == true) $(element).showLoading(); // Make the element visible else $(element).hideLoading(); // Make the element invisible } }; 

and then use it like

 <div data-bind="Loading: isLoading" > 

therefore, basically, you can bind it to something on your view model that can represent its load (or busy) or not.