{"action":"created","issue":{"url":"https://api.github.com/repos/metafizzy/flickity/issues/173","labels_url":"https://api.github.com/repos/metafizzy/flickity/issues/173/labels{/name}","comments_url":"https://api.github.com/repos/metafizzy/flickity/issues/173/comments","events_url":"https://api.github.com/repos/metafizzy/flickity/issues/173/events","html_url":"https://github.com/metafizzy/flickity/issues/173","id":91279017,"number":173,"title":"Lazyloading background images","user":{"login":"nicholas-c","id":6815423,"avatar_url":"https://avatars.githubusercontent.com/u/6815423?v=3","gravatar_id":"","url":"https://api.github.com/users/nicholas-c","html_url":"https://github.com/nicholas-c","followers_url":"https://api.github.com/users/nicholas-c/followers","following_url":"https://api.github.com/users/nicholas-c/following{/other_user}","gists_url":"https://api.github.com/users/nicholas-c/gists{/gist_id}","starred_url":"https://api.github.com/users/nicholas-c/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nicholas-c/subscriptions","organizations_url":"https://api.github.com/users/nicholas-c/orgs","repos_url":"https://api.github.com/users/nicholas-c/repos","events_url":"https://api.github.com/users/nicholas-c/events{/privacy}","received_events_url":"https://api.github.com/users/nicholas-c/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":2,"created_at":"2015-06-26T15:26:00Z","updated_at":"2015-06-26T15:56:56Z","closed_at":null,"body":"Hey, so I'm using flickity which is amazing however want to lazy-load background images for a slide in. No <img> tags being used per slide.\r\n\r\nI've forked my own version and changed flickity.pkgd.js and was going to PR however wanted to open this for discussion first;\r\n\r\nChanges I've made.\r\nAdding to getCellLazyImages - \r\n\r\n``` js\r\n|| cellElem.nodeName == 'DIV' && cellElem.getAttribute('data-flickity-lazyload')\r\n```\r\n\r\nwhen checking cells. Alongside\r\n\r\n``` js\r\n  if(imgs.length < 1) {\r\n    var imgs = cellElem.querySelectorAll('div[data-flickity-lazyload]');\r\n  }\r\n```\r\n\r\nFinally where it loads the image: \r\n\r\n``` js\r\n  // load image\r\n  if(this.img.nodeName == 'DIV') {\r\n    this.img.style.backgroundImage = 'url(\"' + this.img.getAttribute('data-flickity-lazyload') + '\")';\r\n  } else {\r\n    this.img.src = this.img.getAttribute('data-flickity-lazyload');\r\n  }\r\n```\r\n\r\nThoughts?"},"comment":{"url":"https://api.github.com/repos/metafizzy/flickity/issues/comments/115739657","html_url":"https://github.com/metafizzy/flickity/issues/173#issuecomment-115739657","issue_url":"https://api.github.com/repos/metafizzy/flickity/issues/173","id":115739657,"user":{"login":"ksherman","id":2822402,"avatar_url":"https://avatars.githubusercontent.com/u/2822402?v=3","gravatar_id":"","url":"https://api.github.com/users/ksherman","html_url":"https://github.com/ksherman","followers_url":"https://api.github.com/users/ksherman/followers","following_url":"https://api.github.com/users/ksherman/following{/other_user}","gists_url":"https://api.github.com/users/ksherman/gists{/gist_id}","starred_url":"https://api.github.com/users/ksherman/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ksherman/subscriptions","organizations_url":"https://api.github.com/users/ksherman/orgs","repos_url":"https://api.github.com/users/ksherman/repos","events_url":"https://api.github.com/users/ksherman/events{/privacy}","received_events_url":"https://api.github.com/users/ksherman/received_events","type":"User","site_admin":false},"created_at":"2015-06-26T15:56:56Z","updated_at":"2015-06-26T15:56:56Z","body":"+1 for sure! background-size: cover is super useful in responsive design with images, so this would be super helpful. "}}