{"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":[{"id":682901207,"node_id":"MDU6TGFiZWw2ODI5MDEyMDc=","url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue/labels/Priority:%20Medium","name":"Priority: Medium","color":"fbca04","default":false},{"id":457559540,"node_id":"MDU6TGFiZWw0NTc1NTk1NDA=","url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue/labels/Type:%20Enhancement","name":"Type: Enhancement","color":"1d76db","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":9,"created_at":"2018-04-19T07:39:10Z","updated_at":"2019-01-03T17:47:39Z","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/451221843","html_url":"https://github.com/bootstrap-vue/bootstrap-vue/issues/1755#issuecomment-451221843","issue_url":"https://api.github.com/repos/bootstrap-vue/bootstrap-vue/issues/1755","id":451221843,"node_id":"MDEyOklzc3VlQ29tbWVudDQ1MTIyMTg0Mw==","user":{"login":"dohomi","id":489221,"node_id":"MDQ6VXNlcjQ4OTIyMQ==","avatar_url":"https://avatars0.githubusercontent.com/u/489221?v=4","gravatar_id":"","url":"https://api.github.com/users/dohomi","html_url":"https://github.com/dohomi","followers_url":"https://api.github.com/users/dohomi/followers","following_url":"https://api.github.com/users/dohomi/following{/other_user}","gists_url":"https://api.github.com/users/dohomi/gists{/gist_id}","starred_url":"https://api.github.com/users/dohomi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dohomi/subscriptions","organizations_url":"https://api.github.com/users/dohomi/orgs","repos_url":"https://api.github.com/users/dohomi/repos","events_url":"https://api.github.com/users/dohomi/events{/privacy}","received_events_url":"https://api.github.com/users/dohomi/received_events","type":"User","site_admin":false},"created_at":"2019-01-03T17:47:39Z","updated_at":"2019-01-03T17:47:39Z","author_association":"NONE","body":"@tmorehouse I have a wrapper component around the b-img-lazy so I do currently a check on mounted if its inside the viewport as simple as:\r\n```js\r\nmounted(){\r\n  this.inViewport()\r\n},\r\nmethods:{\r\n  inViewport(){\r\n  const bounding = this.$el.getBoundingClientRect()\r\n  const isView = bounding.top >= 0 &&\r\n        bounding.left >= 0 &&\r\n        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\r\n        bounding.right <= (window.innerWidth || document.documentElement.clientWidth)\r\n }\r\n}\r\n```\r\nI'm just facing the issue that I can't set a prop or do anything about triggering the src set. I would rather even think that the component itself should just fall back to b-img in case its inside of the viewport. Either way it would be great to programatically set the 'active' state of the component"}}
{"actor":{"display_login":"dohomi"}}