{"action":"created","issue":{"url":"https://api.github.com/repos/metafizzy/flickity/issues/172","labels_url":"https://api.github.com/repos/metafizzy/flickity/issues/172/labels{/name}","comments_url":"https://api.github.com/repos/metafizzy/flickity/issues/172/comments","events_url":"https://api.github.com/repos/metafizzy/flickity/issues/172/events","html_url":"https://github.com/metafizzy/flickity/issues/172","id":91059717,"number":172,"title":"lazyLoad srcset or <picture>","user":{"login":"solemone","id":2318454,"avatar_url":"https://avatars.githubusercontent.com/u/2318454?v=3","gravatar_id":"","url":"https://api.github.com/users/solemone","html_url":"https://github.com/solemone","followers_url":"https://api.github.com/users/solemone/followers","following_url":"https://api.github.com/users/solemone/following{/other_user}","gists_url":"https://api.github.com/users/solemone/gists{/gist_id}","starred_url":"https://api.github.com/users/solemone/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/solemone/subscriptions","organizations_url":"https://api.github.com/users/solemone/orgs","repos_url":"https://api.github.com/users/solemone/repos","events_url":"https://api.github.com/users/solemone/events{/privacy}","received_events_url":"https://api.github.com/users/solemone/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/metafizzy/flickity/labels/feature%20request","name":"feature request","color":"0052cc"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":11,"created_at":"2015-06-25T19:54:46Z","updated_at":"2015-07-22T21:05:25Z","closed_at":null,"body":"It would be great if there is an option to fill the \"srcset\" attribute instead of the \"src\" attribute for responsive lazy load images. Or both with a new data attribute for the srcset image array."},"comment":{"url":"https://api.github.com/repos/metafizzy/flickity/issues/comments/123863444","html_url":"https://github.com/metafizzy/flickity/issues/172#issuecomment-123863444","issue_url":"https://api.github.com/repos/metafizzy/flickity/issues/172","id":123863444,"user":{"login":"aFarkas","id":188254,"avatar_url":"https://avatars.githubusercontent.com/u/188254?v=3","gravatar_id":"","url":"https://api.github.com/users/aFarkas","html_url":"https://github.com/aFarkas","followers_url":"https://api.github.com/users/aFarkas/followers","following_url":"https://api.github.com/users/aFarkas/following{/other_user}","gists_url":"https://api.github.com/users/aFarkas/gists{/gist_id}","starred_url":"https://api.github.com/users/aFarkas/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/aFarkas/subscriptions","organizations_url":"https://api.github.com/users/aFarkas/orgs","repos_url":"https://api.github.com/users/aFarkas/repos","events_url":"https://api.github.com/users/aFarkas/events{/privacy}","received_events_url":"https://api.github.com/users/aFarkas/received_events","type":"User","site_admin":false},"created_at":"2015-07-22T21:05:25Z","updated_at":"2015-07-22T21:05:25Z","body":"> To use lazySizes in this manner, looks like you'd set loadMode: 0, so lazySizes does not load any images. Then use the Flickity API to trigger lazySizes.loader.unveil() on unloaded assets on Flickity's cellSelect event. That sound about right?\r\n\r\nWhile this would work, I wouldn't do anything with the lazySizes API.\r\n\r\nlazySizes is a full automatic lazyloader. Here is a [demo with Flickity](http://codepen.io/aFarkas/embed/OVoavw/?theme-id=17133&default-tab=result&height=500).\r\n\r\nWhile lazySizes checks whether an image is inside of the viewport (+ some extra offset (called ``expand``) to preload for better user experience). lazySizes automatically also additionally checks overflow: hidden/auto nesting areas ( + removes the expand), if network is already heavily in use (before onload event or more than 3 images loading at the same time).\r\n\r\nlazySizes uses several techniques to automatically detect visibility changes, so you really don't need to call anything with lazySizes. (Of course developers can tweak some parameters, like the ``expand`` option).\r\n\r\nThe only thing, that needs to be done, is that flickity must update its layout as soon as an image.onload event happens, because this might change the layout also. From my viewpoint this also fixes your picture support problem. (#161)\r\n\r\nHere is some code that should work just fine in all browsers but IE8. \r\n```js\r\n(function(){\r\n  var oldFlickityCreate = window.Flickity.prototype._create;\r\n  \r\n  window.Flickity.prototype._create = function(){\r\n    var that = this;\r\n    if(this.element.addEventListener){\r\n      this.element.addEventListener('load', function(){\r\n        that.onresize();\r\n      }, true);\r\n    }\r\n    this._create = oldFlickityCreate;\r\n    return oldFlickityCreate.apply(this, arguments);\r\n  };\r\n})();\r\n```"}}