Build Svelte.js Lazy Loading or Preload Images Component on Scroll in Browser Using HTML5 CSS3 and Javascript

You are currently viewing Build Svelte.js Lazy Loading or Preload Images Component on Scroll in Browser Using HTML5 CSS3 and Javascript

In this article, We can execute the script of “Build Svelte.js Lazy Loading or Preload Images Component on Scroll in Browser Using HTML5 CSS3 and Javascript”. Shall we start the program execution below? Let’s go.

Build Svelte.js Lazy Loading or Preload Images Component on Scroll in Browser Using HTML5 CSS3 and Javascript

index.html

<style>

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;
}

</style>

<script>


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


</script>
Svelte.js Lazy Loading or Preload Images Component on Scroll

Conclusion

I hope this article helps you to know about “Build Svelte.js Lazy Loading or Preload Images Component on Scroll in Browser Using HTML5 CSS3 and Javascript”. If you have any doubts about this topic then please let us know via the comment section. We will help you. Share this article with other Svelte.js developers. Thank You!

Ranjith

Hi, I'm Manoj a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Diksha. Here, I post about programming to help developers.

Leave a Reply