{"action":"created","issue":{"url":"https://api.github.com/repos/konvajs/konva/issues/21","labels_url":"https://api.github.com/repos/konvajs/konva/issues/21/labels{/name}","comments_url":"https://api.github.com/repos/konvajs/konva/issues/21/comments","events_url":"https://api.github.com/repos/konvajs/konva/issues/21/events","html_url":"https://github.com/konvajs/konva/pull/21","id":56116457,"number":21,"title":"Add loader functionality","user":{"login":"jovination","id":9194812,"avatar_url":"https://avatars.githubusercontent.com/u/9194812?v=3","gravatar_id":"","url":"https://api.github.com/users/jovination","html_url":"https://github.com/jovination","followers_url":"https://api.github.com/users/jovination/followers","following_url":"https://api.github.com/users/jovination/following{/other_user}","gists_url":"https://api.github.com/users/jovination/gists{/gist_id}","starred_url":"https://api.github.com/users/jovination/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jovination/subscriptions","organizations_url":"https://api.github.com/users/jovination/orgs","repos_url":"https://api.github.com/users/jovination/repos","events_url":"https://api.github.com/users/jovination/events{/privacy}","received_events_url":"https://api.github.com/users/jovination/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-01-31T07:21:00Z","updated_at":"2015-02-02T17:13:43Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/konvajs/konva/pulls/21","html_url":"https://github.com/konvajs/konva/pull/21","diff_url":"https://github.com/konvajs/konva/pull/21.diff","patch_url":"https://github.com/konvajs/konva/pull/21.patch"},"body":"Based on the enhancement in #20 \r\n\r\n**DO NOT MERGE** *Needs tests, as well as doc blocks*\r\n\r\nAll current tests pass.\r\n\r\nThis is more or less the concept of adding a loader to `Konva`, it works by adding a method to `Konva.Node` to allow load handling. By adding it to Node it can be used in any shape or container.\r\n\r\nI was unable to create a jsfiddle due to using filters to showcase it, but here is some sample code.\r\n\r\n```javascript\r\nvar stage = new Konva.Stage({\r\n  container: 'container',\r\n  width: 300,\r\n  height: 300\r\n});\r\nvar layer = new Konva.Layer();\r\n\r\nfor(var i = 0; i < 5; i++) {\r\n  layer.add(new Konva.Image({\r\n    x: 50 * i,\r\n    y: 50 * i,\r\n    src: 'yoda.jpg',\r\n    width: 106,\r\n    height: 118\r\n  }));\r\n}\r\n\r\nlayer.load();\r\n\r\nlayer.on('progress', function(image){\r\n  image.blurRadius(image.index * 5);\r\n  image.cache();\r\n  image.filters([Konva.Filters.Blur]);\r\n});\r\n\r\nlayer.on('complete', function(){\r\n  stage.add(layer);\r\n});\r\n```\r\n\r\nAny node can call `load` and it will send 2 events as it runs `progress` and `complete`. Each progress event passes the individual node, and complete the container. If used on a single node it would send the same object (so in the case of 1 node there is no need for progress).\r\n\r\nAlso it adds the loader in a similar way to filters, so different kinds could be added in the future, the \"default\" uses normal image onload, but things like websocket loading is possible (or jquery/preloadJS). The object can be passed as the first parameter in load so `layer.load(Konva.Loader.Default);` there is also a second parameter that handles if the events should be removed after complete, it is false by default.\r\n\r\nSo what do you think? I am sure there is many kinks to still work out on this before even thinking of adding it."},"comment":{"url":"https://api.github.com/repos/konvajs/konva/issues/comments/72495932","html_url":"https://github.com/konvajs/konva/pull/21#issuecomment-72495932","issue_url":"https://api.github.com/repos/konvajs/konva/issues/21","id":72495932,"user":{"login":"jovination","id":9194812,"avatar_url":"https://avatars.githubusercontent.com/u/9194812?v=3","gravatar_id":"","url":"https://api.github.com/users/jovination","html_url":"https://github.com/jovination","followers_url":"https://api.github.com/users/jovination/followers","following_url":"https://api.github.com/users/jovination/following{/other_user}","gists_url":"https://api.github.com/users/jovination/gists{/gist_id}","starred_url":"https://api.github.com/users/jovination/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jovination/subscriptions","organizations_url":"https://api.github.com/users/jovination/orgs","repos_url":"https://api.github.com/users/jovination/repos","events_url":"https://api.github.com/users/jovination/events{/privacy}","received_events_url":"https://api.github.com/users/jovination/received_events","type":"User","site_admin":false},"created_at":"2015-02-02T17:13:43Z","updated_at":"2015-02-02T17:13:43Z","body":"I guess with what I learned here it is possible to do it on the side, on a node i get the src parameter, and on a container i loop the children and get the src elements.\r\n\r\nLoaders are made to be plugins more or less, one can easily be crafted with one function to suite the needs of any loader library or method.\r\n\r\nI could switch loader into its own namespace, and it is used like so:\r\n\r\n```javascript\r\nvar loader = new Konva.Loader.Default({\r\n    container: layer,\r\n    removeEvents: true\r\n});\r\nloader.load();\r\nloader.on('progress',function(){\r\n    //you get the idea\r\n});"}}