{"action":"created","issue":{"url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue/issues/1755","repository_url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue","labels_url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue/issues/1755/labels{/name}","comments_url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue/issues/1755/comments","events_url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue/issues/1755/events","html_url":"https://github.com/bootstrap-vue/bootstrap-vue/issues/1755","id":315761030,"node_id":"MDU6SXNzdWUzMTU3NjEwMzA=","number":1755,"title":"Improvement of b-img-lazy component","user":{"login":"emanuelmutschlechner","id":27734375,"node_id":"MDQ6VXNlcjI3NzM0Mzc1","avatar_url":"https://avatars3.githubusercontent.com/u/27734375?v=4","gravatar_id":"","url":"https://api.github.com/users/emanuelmutschlechner","html_url":"https://github.com/emanuelmutschlechner","followers_url":"https://api.github.com/users/emanuelmutschlechner/followers","following_url":"https://api.github.com/users/emanuelmutschlechner/following{/other_user}","gists_url":"https://api.github.com/users/emanuelmutschlechner/gists{/gist_id}","starred_url":"https://api.github.com/users/emanuelmutschlechner/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/emanuelmutschlechner/subscriptions","organizations_url":"https://api.github.com/users/emanuelmutschlechner/orgs","repos_url":"https://api.github.com/users/emanuelmutschlechner/repos","events_url":"https://api.github.com/users/emanuelmutschlechner/events{/privacy}","received_events_url":"https://api.github.com/users/emanuelmutschlechner/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-04-19T07:39:10Z","updated_at":"2018-10-15T22:28:03Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"@victorhramos, @KonradDeskiewicz \r\nLet's continue the conversation here. Initial issue #1619\r\n\r\nThere is an initial check which is executed when `<b-img-lazy>` is `mounted` and `activated` but due to the missing `getBoundingClientRect` of the html element nothing happens.\r\n\r\nI would like to improve this component because it is very useful. Currently lazy loading does only work when the page scrolls. Not optimal when you have dynamic content and want to lazy load, but there is not enough content for the page to scroll. See my codesandbox below.\r\nhttps://codesandbox.io/s/z5pkrx89m\r\n\r\nIn addition it would be nice to have state classes like `<router-link>` has, e.g. \r\n- `img-lazy-blank` when `blank` image is shown. Could be used to apply opacity or other css filters \r\n- `img-lazy-src` when `src` image is shown.\r\n\r\nAnd a last improvement that comes to my mind is async loading of `src` images e.g.\r\n```js\r\nconst prefetchImage = src => new Promise((resolve, reject) => {\r\n    const img = new Image();\r\n    eventOn(img, 'load', () => {\r\n        resolve();\r\n    });\r\n    eventOn(img, 'error', () => {\r\n        reject();\r\n    });\r\n    img.src = src;\r\n});\r\n```"},"comment":{"url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue/issues/comments/430036120","html_url":"https://github.com/bootstrap-vue/bootstrap-vue/issues/1755#issuecomment-430036120","issue_url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue/issues/1755","id":430036120,"node_id":"MDEyOklzc3VlQ29tbWVudDQzMDAzNjEyMA==","user":{"login":"blaskovicz","id":10687433,"node_id":"MDQ6VXNlcjEwNjg3NDMz","avatar_url":"https://avatars0.githubusercontent.com/u/10687433?v=4","gravatar_id":"","url":"https://api.github.com/users/blaskovicz","html_url":"https://github.com/blaskovicz","followers_url":"https://api.github.com/users/blaskovicz/followers","following_url":"https://api.github.com/users/blaskovicz/following{/other_user}","gists_url":"https://api.github.com/users/blaskovicz/gists{/gist_id}","starred_url":"https://api.github.com/users/blaskovicz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/blaskovicz/subscriptions","organizations_url":"https://api.github.com/users/blaskovicz/orgs","repos_url":"https://api.github.com/users/blaskovicz/repos","events_url":"https://api.github.com/users/blaskovicz/events{/privacy}","received_events_url":"https://api.github.com/users/blaskovicz/received_events","type":"User","site_admin":false},"created_at":"2018-10-15T22:28:03Z","updated_at":"2018-10-15T22:28:03Z","author_association":"NONE","body":"I'm noticing an issue as well when using a b-img-lazy withing a b-carousel-slide that's inside a b-table. When sorting rows, my work around to fire the scroll even when a b-carousel slides or the component is mounted doesn't work and the image is left blank until I re-scroll:\r\nhttps://github.com/blaskovicz/house-rank/commit/0118fc398719f3db65d3d91be085536ff122dbfe"}}
{"actor":{"display_login":"blaskovicz"}}