{"action":"created","issue":{"url":"https://api.github.com/repos/aurelia/templating/issues/349","repository_url":"https://api.github.com/repos/aurelia/templating","labels_url":"https://api.github.com/repos/aurelia/templating/issues/349/labels{/name}","comments_url":"https://api.github.com/repos/aurelia/templating/issues/349/comments","events_url":"https://api.github.com/repos/aurelia/templating/issues/349/events","html_url":"https://github.com/aurelia/templating/issues/349","id":154456533,"number":349,"title":"Percieved lag when img elements are reused.","user":{"login":"lukechilds","id":2123375,"avatar_url":"https://avatars.githubusercontent.com/u/2123375?v=3","gravatar_id":"","url":"https://api.github.com/users/lukechilds","html_url":"https://github.com/lukechilds","followers_url":"https://api.github.com/users/lukechilds/followers","following_url":"https://api.github.com/users/lukechilds/following{/other_user}","gists_url":"https://api.github.com/users/lukechilds/gists{/gist_id}","starred_url":"https://api.github.com/users/lukechilds/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lukechilds/subscriptions","organizations_url":"https://api.github.com/users/lukechilds/orgs","repos_url":"https://api.github.com/users/lukechilds/repos","events_url":"https://api.github.com/users/lukechilds/events{/privacy}","received_events_url":"https://api.github.com/users/lukechilds/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/aurelia/templating/labels/bug","name":"bug","color":"fc2929"}],"state":"open","locked":false,"assignee":{"login":"jdanyow","id":1306747,"avatar_url":"https://avatars.githubusercontent.com/u/1306747?v=3","gravatar_id":"","url":"https://api.github.com/users/jdanyow","html_url":"https://github.com/jdanyow","followers_url":"https://api.github.com/users/jdanyow/followers","following_url":"https://api.github.com/users/jdanyow/following{/other_user}","gists_url":"https://api.github.com/users/jdanyow/gists{/gist_id}","starred_url":"https://api.github.com/users/jdanyow/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jdanyow/subscriptions","organizations_url":"https://api.github.com/users/jdanyow/orgs","repos_url":"https://api.github.com/users/jdanyow/repos","events_url":"https://api.github.com/users/jdanyow/events{/privacy}","received_events_url":"https://api.github.com/users/jdanyow/received_events","type":"User","site_admin":false},"milestone":null,"comments":5,"created_at":"2016-05-12T11:07:58Z","updated_at":"2016-05-12T16:01:00Z","closed_at":null,"body":"When you update an image src many browsers will continue showing the old src until the new src has loaded. In Aurelia, elements are often reused, when image elements are reused it appears very laggy (even through the Aurelia side is fast) due to the way the browser updates the images.\r\n\r\nTake this example:\r\n\r\nhttps://gist.run/?id=50b5af249b57d1f18577bdd6cc4bfe33\r\n\r\n(example works best if you open dev tools in chrome and disable cache in network tab)\r\n\r\nIf you append a new item to the array a new DOM node is created and appended for the new image element, this works fine.\r\n\r\nHowever if you **prepend** an item to the array a new DOM node is **appended** and all the attributes are shifted along. This means the prepended image is wrong until the new one loads. This makes the app _appear_ very laggy.\r\n\r\nI think a better default behaviour would be for the prepended image to not show any image until the src has loaded. This would make the behaviour of appending and prepending consistent.\r\n\r\nI think this could be achieved by inserting new DOM nodes to the correct place by doing a deep compare on the objects to see if any new elements have been added and if so where (probably not very performant).\r\n\r\nAlternatively removing an img elements src attribute before reusing it may stop the default browser behaviour (untested)."},"comment":{"url":"https://api.github.com/repos/aurelia/templating/issues/comments/218803569","html_url":"https://github.com/aurelia/templating/issues/349#issuecomment-218803569","issue_url":"https://api.github.com/repos/aurelia/templating/issues/349","id":218803569,"user":{"login":"jdanyow","id":1306747,"avatar_url":"https://avatars.githubusercontent.com/u/1306747?v=3","gravatar_id":"","url":"https://api.github.com/users/jdanyow","html_url":"https://github.com/jdanyow","followers_url":"https://api.github.com/users/jdanyow/followers","following_url":"https://api.github.com/users/jdanyow/following{/other_user}","gists_url":"https://api.github.com/users/jdanyow/gists{/gist_id}","starred_url":"https://api.github.com/users/jdanyow/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jdanyow/subscriptions","organizations_url":"https://api.github.com/users/jdanyow/orgs","repos_url":"https://api.github.com/users/jdanyow/repos","events_url":"https://api.github.com/users/jdanyow/events{/privacy}","received_events_url":"https://api.github.com/users/jdanyow/received_events","type":"User","site_admin":false},"created_at":"2016-05-12T16:01:00Z","updated_at":"2016-05-12T16:01:00Z","body":"We tested it, what we found was the recent optimization didn't help because of the way the benchmark replaces the whole array instance as well as all the objects within."}}