<!-- See the full article for how this is built! -->
<!-- Alternately you vcan download the full source code here: https://github.com/donovanh/svelte-image-loading -->

li.svelte-1augzwc{list-style:none;background:#eee;width:200px;height:200px;margin:2em}
img.svelte-18dspsm{height:200px;opacity:0;transition:opacity 1200ms ease-out}img.loaded.svelte-18dspsm{opacity:1}
div.svelte-1c44y5p{width:100%;height:100%}

/*# sourceMappingURL=bundle.css.map */

/* Global CSS */

html, body {
	position: relative;
	width: 100%;
	height: 100%;
}

body {
	color: #333;
	margin: 0;
	padding: 8px;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

a {
	color: rgb(0,100,200);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: rgb(0,80,160);
}

label {
	display: block;
}

input, button, select, textarea {
	font-family: inherit;
	font-size: inherit;
	padding: 0.4em;
	margin: 0 0 0.5em 0;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 2px;
}

input:disabled {
	color: #ccc;
}

input[type="range"] {
	height: 0;
}

button {
	color: #333;
	background-color: #f4f4f4;
	outline: none;
}

button:disabled {
	color: #999;
}

button:not(:disabled):active {
	background-color: #ddd;
}

button:focus {
	border-color: #666;
}

var app=function(){"use strict";function t(){}function e(t){return t()}function n(){return Object.create(null)}function s(t){t.forEach(e)}function r(t){return"function"==typeof t}function o(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}function c(t,e,n,s){return t[1]&&s?function(t,e){for(const n in e)t[n]=e[n];return t}(n.ctx.slice(),t[1](s(e))):n.ctx}function l(t,e,n,s,r,o,l){const a=function(t,e,n,s){if(t[2]&&s){const r=t[2](s(n));if(void 0===e.dirty)return r;if("object"==typeof r){const t=[],n=Math.max(e.dirty.length,r.length);for(let s=0;s<n;s+=1)t[s]=e.dirty[s]|r[s];return t}return e.dirty|r}return e.dirty}(e,s,r,o);if(a){const r=c(e,n,s,l);t.p(r,a)}}function a(t,e){t.appendChild(e)}function i(t,e,n){t.insertBefore(e,n||null)}function u(t){t.parentNode.removeChild(t)}function $(t){return document.createElement(t)}function p(t){return document.createTextNode(t)}function f(){return p(" ")}function m(t,e,n){null==n?t.removeAttribute(e):t.getAttribute(e)!==n&&t.setAttribute(e,n)}function g(t,e,n){t.classList[n?"add":"remove"](e)}let d;function h(t){d=t}function w(t){(function(){if(!d)throw new Error("Function called outside component initialization");return d})().$$.on_mount.push(t)}const x=[],v=[],y=[],b=[],E=Promise.resolve();let z=!1;function _(t){y.push(t)}let C=!1;const M=new Set;function A(){if(!C){C=!0;do{for(let t=0;t<x.length;t+=1){const e=x[t];h(e),I(e.$$)}for(x.length=0;v.length;)v.pop()();for(let t=0;t<y.length;t+=1){const e=y[t];M.has(e)||(M.add(e),e())}y.length=0}while(x.length);for(;b.length;)b.pop()();z=!1,C=!1,M.clear()}}function I(t){if(null!==t.fragment){t.update(),s(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(_)}}const L=new Set;let N;function O(t,e){t&&t.i&&(L.delete(t),t.i(e))}function j(t,e,n,s){if(t&&t.o){if(L.has(t))return;L.add(t),N.c.push(()=>{L.delete(t),s&&(n&&t.d(1),s())}),t.o(e)}}function k(t){t&&t.c()}function S(t,n,o){const{fragment:c,on_mount:l,on_destroy:a,after_update:i}=t.$$;c&&c.m(n,o),_(()=>{const n=l.map(e).filter(r);a?a.push(...n):s(n),t.$$.on_mount=[]}),i.forEach(_)}function B(t,e){const n=t.$$;null!==n.fragment&&(s(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}function q(t,e){-1===t.$$.dirty[0]&&(x.push(t),z||(z=!0,E.then(A)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function F(e,r,o,c,l,a,i=[-1]){const $=d;h(e);const p=r.props||{},f=e.$$={fragment:null,ctx:null,props:a,update:t,not_equal:l,bound:n(),on_mount:[],on_destroy:[],before_update:[],after_update:[],context:new Map($?$.$$.context:[]),callbacks:n(),dirty:i};let m=!1;if(f.ctx=o?o(e,p,(t,n,...s)=>{const r=s.length?s[0]:n;return f.ctx&&l(f.ctx[t],f.ctx[t]=r)&&(f.bound[t]&&f.bound[t](r),m&&q(e,t)),n}):[],f.update(),m=!0,s(f.before_update),f.fragment=!!c&&c(f.ctx),r.target){if(r.hydrate){const t=function(t){return Array.from(t.childNodes)}(r.target);f.fragment&&f.fragment.l(t),t.forEach(u)}else f.fragment&&f.fragment.c();r.intro&&O(e.$$.fragment),S(e,r.target,r.anchor),A()}h($)}class H{$destroy(){B(this,1),this.$destroy=t}$on(t,e){const n=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return n.push(e),()=>{const t=n.indexOf(e);-1!==t&&n.splice(t,1)}}$set(){}}const P=t=>({intersecting:1&t}),R=t=>({intersecting:t[0]});function T(t){let e,n;const s=t[8].default,r=function(t,e,n,s){if(t){const r=c(t,e,n,s);return t[0](r)}}(s,t,t[7],R);return{c(){e=$("div"),r&&r.c(),m(e,"class","svelte-1c44y5p")},m(s,o){i(s,e,o),r&&r.m(e,null),t[9](e),n=!0},p(t,[e]){r&&r.p&&129&e&&l(r,s,t,t[7],e,P,R)},i(t){n||(O(r,t),n=!0)},o(t){j(r,t),n=!1},d(n){n&&u(e),r&&r.d(n),t[9](null)}}}function W(t,e,n){let s,{once:r=!1}=e,{top:o=0}=e,{bottom:c=0}=e,{left:l=0}=e,{right:a=0}=e,i=!1;w(()=>{if("undefined"!=typeof IntersectionObserver){const t=new IntersectionObserver(e=>{n(0,i=e[0].isIntersecting),i&&r&&t.unobserve(s)},{rootMargin:`${c}px ${l}px ${o}px ${a}px`});return t.observe(s),()=>t.unobserve(s)}function t(){const e=s.getBoundingClientRect();n(0,i=e.bottom+c>0&&e.right+a>0&&e.top-o<window.innerHeight&&e.left-l<window.innerWidth),i&&r&&window.removeEventListener("scroll",t)}return window.addEventListener("scroll",t),()=>window.removeEventListener("scroll",t)});let{$$slots:u={},$$scope:$}=e;return t.$set=t=>{"once"in t&&n(2,r=t.once),"top"in t&&n(3,o=t.top),"bottom"in t&&n(4,c=t.bottom),"left"in t&&n(5,l=t.left),"right"in t&&n(6,a=t.right),"$$scope"in t&&n(7,$=t.$$scope)},[i,s,r,o,c,l,a,$,u,function(t){v[t?"unshift":"push"](()=>{s=t,n(1,s)})}]}class D extends H{constructor(t){super(),F(this,t,W,T,o,{once:2,top:3,bottom:4,left:5,right:6})}}function G(e){let n,s;return{c(){n=$("img"),n.src!==(s=e[0])&&m(n,"src",s),m(n,"alt",e[1]),m(n,"class","svelte-18dspsm"),g(n,"loaded",e[2])},m(t,s){i(t,n,s),e[4](n)},p(t,[e]){1&e&&n.src!==(s=t[0])&&m(n,"src",s),2&e&&m(n,"alt",t[1]),4&e&&g(n,"loaded",t[2])},i:t,o:t,d(t){t&&u(n),e[4](null)}}}function J(t,e,n){let s,{src:r}=e,{alt:o}=e,c=!1;return w(()=>{n(3,s.onload=()=>{n(2,c=!0)},s)}),t.$set=t=>{"src"in t&&n(0,r=t.src),"alt"in t&&n(1,o=t.alt)},[r,o,c,s,function(t){v[t?"unshift":"push"](()=>{s=t,n(3,s)})}]}class K extends H{constructor(t){super(),F(this,t,J,G,o,{src:0,alt:1})}}function Q(t){let e,n;return e=new K({props:{alt:t[1],src:t[0]}}),{c(){k(e.$$.fragment)},m(t,s){S(e,t,s),n=!0},p(t,n){const s={};2&n&&(s.alt=t[1]),1&n&&(s.src=t[0]),e.$set(s)},i(t){n||(O(e.$$.fragment,t),n=!0)},o(t){j(e.$$.fragment,t),n=!1},d(t){B(e,t)}}}function U(t){let e,n,r=t[2]&&Q(t);return{c(){r&&r.c(),e=p("")},m(t,s){r&&r.m(t,s),i(t,e,s),n=!0},p(t,n){t[2]?r?(r.p(t,n),4&n&&O(r,1)):(r=Q(t),r.c(),O(r,1),r.m(e.parentNode,e)):r&&(N={r:0,c:[],p:N},j(r,1,1,()=>{r=null}),N.r||s(N.c),N=N.p)},i(t){n||(O(r),n=!0)},o(t){j(r),n=!1},d(t){r&&r.d(t),t&&u(e)}}}function V(t){let e,n;return e=new D({props:{once:!0,$$slots:{default:[U,({intersecting:t})=>({2:t}),({intersecting:t})=>t?4:0]},$$scope:{ctx:t}}}),{c(){k(e.$$.fragment)},m(t,s){S(e,t,s),n=!0},p(t,[n]){const s={};15&n&&(s.$$scope={dirty:n,ctx:t}),e.$set(s)},i(t){n||(O(e.$$.fragment,t),n=!0)},o(t){j(e.$$.fragment,t),n=!1},d(t){B(e,t)}}}function X(t,e,n){let{src:s}=e,{alt:r}=e;return t.$set=t=>{"src"in t&&n(0,s=t.src),"alt"in t&&n(1,r=t.alt)},[s,r]}class Y extends H{constructor(t){super(),F(this,t,X,V,o,{src:0,alt:1})}}function Z(e){let n,s,r,o,c,l,p,g,d,h,w,x,v,y,b,E,z,_,C,M,A,I,L,N,q,F,H,P,R,T,W,D,G,J,K,Q,U,V,X,Z,et,nt,st,rt,ot,ct,lt,at,it,ut,$t,pt,ft,mt,gt,dt;return p=new Y({props:{src:`https://picsum.photos/seed/${tt(0,200)}/800/800`,alt:"Example image"}}),h=new Y({props:{src:`https://picsum.photos/seed/${tt(0,200)}/800/800`,alt:"Example image"}}),v=new Y({props:{src:`https://picsum.photos/seed/${tt(0,200)}/800/800`,alt:"Example image"}}),E=new Y({props:{src:`https://picsum.photos/seed/${tt(0,200)}/800/800`,alt:"Example image"}}),C=new Y({props:{src:`https://picsum.photos/seed/${tt(0,200)}/800/800`,alt:"Example image"}}),I=new Y({props:{src:`https://picsum.photos/seed/${tt(0,200)}/800/800`,alt:"Example image"}}),q=new Y({props:{src:`https://picsum.photos/seed/${tt(0,200)}/800/800`,alt:"Example image"}}),P=new Y({props:{src:`https://picsum.photos/seed/${tt(0,200)}/800/800`,alt:"Example image"}}),W=new Y({props:{src:`https://picsum.photos/seed/${tt(0,200)}/800/800`,alt:"Example image"}}),J=new Y({props:{src:`https://picsum.photos/seed/${tt(0,200)}/800/800`,alt:"Example image"}}),U=new Y({props:{src:`https://picsum.photos/seed/${tt(0,200)}/800/800`,alt:"Example image"}}),Z=new Y({props:{src:`https://picsum.photos/seed/${tt(0,200)}/800/800`,alt:"Example image"}}),st=new Y({props:{src:`https://picsum.photos/seed/${tt(0,200)}/800/800`,alt:"Example image"}}),ct=new Y({props:{src:`https://picsum.photos/seed/${tt(0,200)}/800/800`,alt:"Example image"}}),it=new Y({props:{src:`https://picsum.photos/seed/${tt(0,200)}/800/800`,alt:"Example image"}}),pt=new Y({props:{src:`https://picsum.photos/seed/${tt(0,200)}/800/800`,alt:"Example image"}}),gt=new Y({props:{src:`https://picsum.photos/seed/${tt(0,200)}/800/800`,alt:"Example image"}}),{c(){n=$("h2"),n.textContent="Image loading demo",s=f(),r=$("p"),r.textContent="Scroll to see images fade-in",o=f(),c=$("ul"),l=$("li"),k(p.$$.fragment),g=f(),d=$("li"),k(h.$$.fragment),w=f(),x=$("li"),k(v.$$.fragment),y=f(),b=$("li"),k(E.$$.fragment),z=f(),_=$("li"),k(C.$$.fragment),M=f(),A=$("li"),k(I.$$.fragment),L=f(),N=$("li"),k(q.$$.fragment),F=f(),H=$("li"),k(P.$$.fragment),R=f(),T=$("li"),k(W.$$.fragment),D=f(),G=$("li"),k(J.$$.fragment),K=f(),Q=$("li"),k(U.$$.fragment),V=f(),X=$("li"),k(Z.$$.fragment),et=f(),nt=$("li"),k(st.$$.fragment),rt=f(),ot=$("li"),k(ct.$$.fragment),lt=f(),at=$("li"),k(it.$$.fragment),ut=f(),$t=$("li"),k(pt.$$.fragment),ft=f(),mt=$("li"),k(gt.$$.fragment),m(l,"class","svelte-1augzwc"),m(d,"class","svelte-1augzwc"),m(x,"class","svelte-1augzwc"),m(b,"class","svelte-1augzwc"),m(_,"class","svelte-1augzwc"),m(A,"class","svelte-1augzwc"),m(N,"class","svelte-1augzwc"),m(H,"class","svelte-1augzwc"),m(T,"class","svelte-1augzwc"),m(G,"class","svelte-1augzwc"),m(Q,"class","svelte-1augzwc"),m(X,"class","svelte-1augzwc"),m(nt,"class","svelte-1augzwc"),m(ot,"class","svelte-1augzwc"),m(at,"class","svelte-1augzwc"),m($t,"class","svelte-1augzwc"),m(mt,"class","svelte-1augzwc")},m(t,e){i(t,n,e),i(t,s,e),i(t,r,e),i(t,o,e),i(t,c,e),a(c,l),S(p,l,null),a(c,g),a(c,d),S(h,d,null),a(c,w),a(c,x),S(v,x,null),a(c,y),a(c,b),S(E,b,null),a(c,z),a(c,_),S(C,_,null),a(c,M),a(c,A),S(I,A,null),a(c,L),a(c,N),S(q,N,null),a(c,F),a(c,H),S(P,H,null),a(c,R),a(c,T),S(W,T,null),a(c,D),a(c,G),S(J,G,null),a(c,K),a(c,Q),S(U,Q,null),a(c,V),a(c,X),S(Z,X,null),a(c,et),a(c,nt),S(st,nt,null),a(c,rt),a(c,ot),S(ct,ot,null),a(c,lt),a(c,at),S(it,at,null),a(c,ut),a(c,$t),S(pt,$t,null),a(c,ft),a(c,mt),S(gt,mt,null),dt=!0},p:t,i(t){dt||(O(p.$$.fragment,t),O(h.$$.fragment,t),O(v.$$.fragment,t),O(E.$$.fragment,t),O(C.$$.fragment,t),O(I.$$.fragment,t),O(q.$$.fragment,t),O(P.$$.fragment,t),O(W.$$.fragment,t),O(J.$$.fragment,t),O(U.$$.fragment,t),O(Z.$$.fragment,t),O(st.$$.fragment,t),O(ct.$$.fragment,t),O(it.$$.fragment,t),O(pt.$$.fragment,t),O(gt.$$.fragment,t),dt=!0)},o(t){j(p.$$.fragment,t),j(h.$$.fragment,t),j(v.$$.fragment,t),j(E.$$.fragment,t),j(C.$$.fragment,t),j(I.$$.fragment,t),j(q.$$.fragment,t),j(P.$$.fragment,t),j(W.$$.fragment,t),j(J.$$.fragment,t),j(U.$$.fragment,t),j(Z.$$.fragment,t),j(st.$$.fragment,t),j(ct.$$.fragment,t),j(it.$$.fragment,t),j(pt.$$.fragment,t),j(gt.$$.fragment,t),dt=!1},d(t){t&&u(n),t&&u(s),t&&u(r),t&&u(o),t&&u(c),B(p),B(h),B(v),B(E),B(C),B(I),B(q),B(P),B(W),B(J),B(U),B(Z),B(st),B(ct),B(it),B(pt),B(gt)}}}function tt(t,e){let n=Math.random()*(e-t)+t;return Math.round(n)}return new class extends H{constructor(t){super(),F(this,t,null,Z,o,{})}}({target:document.body,props:{name:"world"}})}();
//# sourceMappingURL=bundle.js.map