{"action":"created","issue":{"url":"https://api.github.com/repos/verlok/lazyload/issues/206","repository_url":"https://api.github.com/repos/verlok/lazyload","labels_url":"https://api.github.com/repos/verlok/lazyload/issues/206/labels{/name}","comments_url":"https://api.github.com/repos/verlok/lazyload/issues/206/comments","events_url":"https://api.github.com/repos/verlok/lazyload/issues/206/events","html_url":"https://github.com/verlok/lazyload/issues/206","id":325833788,"number":206,"title":"Images not loading when scrolling container appears","user":{"login":"weavermedia","id":3027787,"avatar_url":"https://avatars2.githubusercontent.com/u/3027787?v=4","gravatar_id":"","url":"https://api.github.com/users/weavermedia","html_url":"https://github.com/weavermedia","followers_url":"https://api.github.com/users/weavermedia/followers","following_url":"https://api.github.com/users/weavermedia/following{/other_user}","gists_url":"https://api.github.com/users/weavermedia/gists{/gist_id}","starred_url":"https://api.github.com/users/weavermedia/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/weavermedia/subscriptions","organizations_url":"https://api.github.com/users/weavermedia/orgs","repos_url":"https://api.github.com/users/weavermedia/repos","events_url":"https://api.github.com/users/weavermedia/events{/privacy}","received_events_url":"https://api.github.com/users/weavermedia/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2018-05-23T19:01:27Z","updated_at":"2018-05-28T20:30:33Z","closed_at":null,"author_association":"NONE","body":"Bug - initial images not loading when the scrolling container appears on the screen\r\n\r\n* What is happening?\r\nI'm using LazyLoad inside an Uploadcare widget to defer loading of a grid of images.\r\n* What is the expected behaviour?\r\nI expect the images in the visible portion of the scrolling container to load immediately.\r\n* Which version of LazyLoad are you using?\r\n8.7.1\r\n* In which browser(s) and browser version(s) are you experiencing the problem?\r\nChrome 66\r\n* Could you provide the HTML, CSS and JS code you use for your images?\r\nhttps://s.codepen.io/weavermedia/debug/eraYGK/bZAQWNLBoWoM\r\n* What are the steps to reproduce the problem?\r\nClick the 'Choose a file' button and see that the images in the visible portion of the scrolling container don't load. If you scroll a tiny amount they load immediately. Further scrolling loads as expected."},"comment":{"url":"https://api.github.com/repos/verlok/lazyload/issues/comments/392598925","html_url":"https://github.com/verlok/lazyload/issues/206#issuecomment-392598925","issue_url":"https://api.github.com/repos/verlok/lazyload/issues/206","id":392598925,"user":{"login":"verlok","id":1127721,"avatar_url":"https://avatars3.githubusercontent.com/u/1127721?v=4","gravatar_id":"","url":"https://api.github.com/users/verlok","html_url":"https://github.com/verlok","followers_url":"https://api.github.com/users/verlok/followers","following_url":"https://api.github.com/users/verlok/following{/other_user}","gists_url":"https://api.github.com/users/verlok/gists{/gist_id}","starred_url":"https://api.github.com/users/verlok/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/verlok/subscriptions","organizations_url":"https://api.github.com/users/verlok/orgs","repos_url":"https://api.github.com/users/verlok/repos","events_url":"https://api.github.com/users/verlok/events{/privacy}","received_events_url":"https://api.github.com/users/verlok/received_events","type":"User","site_admin":false},"created_at":"2018-05-28T20:30:33Z","updated_at":"2018-05-28T20:30:33Z","author_association":"OWNER","body":"The reason for your code is not working properly is that the `uploadcare` layer is shown AFTER the LazyLoad instance is created. So when it loops through elements to show, it doesn't find any.\r\n\r\nFirst, very ugly solution that came to my mind and works: instantiate the LazyLoad after the `uploadcare` execution stack has finished. You can use a `setTimeout` function with 1 ms delay to do so.\r\n\r\n```js\r\nsetTimeout(function() {\r\n    var myLazyLoad = new LazyLoad({\r\n      container: container[0]\r\n    });\r\n    console.log(myLazyLoad);\r\n  }, 1);\r\n```\r\n\r\nCodepen here https://codepen.io/verlok/pen/xzKyKo?editors=1010"}}
{"actor":{"display_login":"verlok"}}