It is possible to specify both locally and globally a loader to be used.
Use loader: loader
for specifying a loader for a page
and pager.loader = function(page, element) { ... }
for specifying
a default-loader for all pages.
The loader-method should return an object with 2 methods: load
and unload
.
<div data-bind="page: {id: 'Sabrepulse', title: 'Sabrepulse', loader: spinnerLoader, sourceOnShow: 'https://embed.spotify.com/?uri=spotify:album:43tqiFDcU8JcMVSYj6NTi3'}"> <iframe width="300" height="380" frameborder="0" allowtransparency="true"></iframe> </div>
where
spinnerLoader: function(page, element) { var loader = {}; var txt = $('<img src="ajax-loader.gif"/>'); loader.load = function () { $(element).empty(); $(element).append(txt); }; loader.unload = function () { txt.remove(); }; return loader; }
Here is an example where the load method never returns (so we can see the spinner). Open eternal spinner.