{"action":"opened","issue":{"url":"https://api.github.com/repos/openseadragon/openseadragon/issues/1039","repository_url":"https://api.github.com/repos/openseadragon/openseadragon","labels_url":"https://api.github.com/repos/openseadragon/openseadragon/issues/1039/labels{/name}","comments_url":"https://api.github.com/repos/openseadragon/openseadragon/issues/1039/comments","events_url":"https://api.github.com/repos/openseadragon/openseadragon/issues/1039/events","html_url":"https://github.com/openseadragon/openseadragon/issues/1039","id":179198362,"number":1039,"title":"Suggestions welcome:  loading indicator on  a custom toolbar","user":{"login":"comrade2sun","id":20903808,"avatar_url":"https://avatars.githubusercontent.com/u/20903808?v=3","gravatar_id":"","url":"https://api.github.com/users/comrade2sun","html_url":"https://github.com/comrade2sun","followers_url":"https://api.github.com/users/comrade2sun/followers","following_url":"https://api.github.com/users/comrade2sun/following{/other_user}","gists_url":"https://api.github.com/users/comrade2sun/gists{/gist_id}","starred_url":"https://api.github.com/users/comrade2sun/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/comrade2sun/subscriptions","organizations_url":"https://api.github.com/users/comrade2sun/orgs","repos_url":"https://api.github.com/users/comrade2sun/repos","events_url":"https://api.github.com/users/comrade2sun/events{/privacy}","received_events_url":"https://api.github.com/users/comrade2sun/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-09-26T11:00:35Z","updated_at":"2016-09-26T11:00:35Z","closed_at":null,"body":"#### _Prolog_\r\n_I added a little loading indicator to a custom toolbar while loading a set of new `tileSources` plus a new `background-image` for the OSD div. For now it indicates the loading process of the new background images, which is already sufficient for my purpose. \r\nExperimental example:_\r\n<a href=\"http://homepage.o2mail.de/nixneues/cojp/utamaro.html\">Kitagawa Utamaro - Gallery</a>\r\n\r\n_Even it might be a bit of an over bloated use case, **but...**_\r\n#### The idea ✨ \r\nShow a loading indicator everytime new tiles are loaded.\r\n...\r\nThe Script I am using right now:\r\n```javascript\r\nvar progBar = {template:3,parent:'#toolbarDiv'};\r\nvar queryProgress = new Mprogress(progBar);\r\n\t// bunch of other vars\r\nvar viewer = new OpenSeadragon.Viewer({ //  option, create viewer etc.\r\n\t// load image set 1\r\n$('#pg01').click ... // with 1 tileSource\r\n\t// load image set 2\r\n$('#pg02').click(function () {\r\n\tviewer.open([{x : -0.55,y : 0.25,height : 1,tileSource : yogoto}, \r\n\t// plus 3 more tileSources\r\n\t\t]);\r\n\t// change background-image\r\n\t$('.openseadragon').removeClass().addClass('openseadragon conta bg-2');\r\n\t// start the progressbar\r\n\tqueryProgress.start();\r\n\t// stop the progressbar\r\n\t$('#osd-canvas').imagesLoaded({\r\n\t\tbackground : true\r\n\t}, function () {\r\n\t\tqueryProgress.end();\r\n\t});\r\n});\r\n\t// load image set 3\r\n$('#pg03').click ...  $('#pg04').click ... and so on\r\n\t//  other script\r\n/*\r\nDependencies for loading indicator:\r\nMProgress.js: https://github.com/lightningtgc/MProgress.js\r\nimagesloaded: https://github.com/desandro/imagesloaded\r\n*/\r\n```\r\n#### THE UNKNOWN ❓ \r\nHow to start and stop the loading indicator for newly loaded tiles, similar as in the background-image case?\r\n\r\n#### The Question\r\nIs this worthwhile digging in deeper? <i>... anyway I might learn something else about OSD</i> ;~)\r\n\r\n#### State of the art\r\nMy JavaScript skills are zilch + 0.1%  <i>(Please be patient with me!)</i>\r\n...\r\nAny suggestion and/or criticism from experienced JavaScript Wizards are welcome. 🌴 \r\n\r\nThanks for reading"}}
{"actor":{"display_login":"comrade2sun"}}