knockout.js - How to bind list of images using knockout in page with loading spinner -

i have been searching google ideas , found code it's incomplete , hard understand. want use knockout bind list of images.

what's best way set spinner background while images loading. have spinner class can set , unset background image.

here code it's not clear

 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 element visible             else                 $(element).hideloading();   // make element invisible         }     };  , use  <div data-bind="loading: isloading" > 

update

    <img src="http://www.aero-sa.com/images/ajax-loader.gif" data-bind="visible:loading" /> var model = function() {     var self = this;     this.loading =  ko.observable(true);     settimeout(function() {         self.loading(false);     }, 4000); } ko.applybindings(new model()); 

i have few question on above code. this here? this point what? when write code image not getting hide....why this not working.

var model = function() {         //var self = this;         this.loading =  ko.observable(true);         settimeout(function() {             this.loading(false);         }, 4000);     }     ko.applybindings(new model()); 

please explain if possible.

i had similar problem. in case, needed hide whole block of html if image inside block not loaded. ended using imagesloaded library (https://github.com/desandro/imagesloaded), wrapped in knockout custom binding :

function tryregisterevent(imgload, event, handler) {     if (handler === undefined) return;      imgload.on(event, handler); }  function tryregisterevents(imgload, events, bindings) {     (var = 0; < events.length; ++i) {         var event = events[i];         tryregisterevent(imgload, event, bindings[event]);     } }  ko.bindinghandlers['imagesloaded'] = {     'init': function (element, valueaccessor, allbindingsaccessor, viewmodel, bindingcontext) {         if (imagesloaded === undefined) {             throw new error('imagesloaded not defined');         }          var bindings = ko.utils.unwrapobservable(valueaccessor());          var imgload = imagesloaded(element);          tryregisterevents(imgload, ['always', 'done', 'fail', 'progress'], bindings);     },     'update': function () {} }; 

then use binding in html, follow:

<div data-bind="visible: isloading() || isloaded()">     more html , text...     <img src="..." data-bind="imagesloaded: { done: function () { isloaded(true); }, always: function () { isloading(false); } }" /> </div> 

i set isloading true , isloaded false, , event handlers change view model's state accordingly, based on image load status.

note since imagesloaded library can work container instead of single images (and monitor images inside container), can use custom binding on parent element containing image gallery, display spinner , hide when always event triggered.