Skip to content

Commit 7e2180b

Browse files
OvenoboyoOvenoboyo
committed
Lazy load images
1 parent 5dd508c commit 7e2180b

1 file changed

Lines changed: 54 additions & 87 deletions

File tree

‎index.html‎

Lines changed: 54 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,47 @@
2929
<meta property="og:image:height" content="1024" />
3030
<meta property="og:image:alt" content="Moosync logo" />
3131
<title>Moosync</title>
32+
33+
<!-- Start Single Page Apps for GitHub Pages -->
34+
<script type="text/javascript">
35+
// Single Page Apps for GitHub Pages
36+
// MIT License
37+
// https://github.com/rafgraph/spa-github-pages
38+
// This script checks to see if a redirect is present in the query string,
39+
// converts it back into the correct url and adds it to the
40+
// browser's history using window.history.replaceState(...),
41+
// which won't cause the browser to attempt to load the new url.
42+
// When the single page app is loaded further down in this file,
43+
// the correct url will be waiting in the browser's history for
44+
// the single page app to route accordingly.
45+
; (function (l) {
46+
if (l.search[1] === "/") {
47+
var decoded = l.search
48+
.slice(1)
49+
.split("&")
50+
.map(function (s) {
51+
return s.replace(/~and~/g, "&")
52+
})
53+
.join("?")
54+
window.history.replaceState(
55+
null,
56+
null,
57+
l.pathname.slice(0, -1) + decoded + l.hash
58+
)
59+
}
60+
})(window.location)
61+
</script>
62+
<!-- End Single Page Apps for GitHub Pages -->
63+
64+
<script src="/assets/js/index.js" type="module"></script>
3265
</head>
3366

3467
<body class="main" id="body">
3568
<nav class="nav__bar">
3669
<a href="#">
3770
<span class="title__logo">
3871
<span class="logo">
39-
<img src="/assets/img/logo.svg" title="Moosync" alt="moosync logo" class="logo__img" />
72+
<img loading=lazy src="/assets/img/logo.svg" title="Moosync" alt="moosync logo" class="logo__img" />
4073
</span>
4174
<span class="title">moosync</span>
4275
</span>
@@ -56,9 +89,9 @@
5689
<button id="download__btn" class="navigation__buttons">Download</button>
5790
</div>
5891
<div class="moosync__navbar-mobileScreen">
59-
<img src="/assets/img/hamburgerIcon.svg" alt="Menu" id="hamburger-open" />
92+
<img loading="lazy" src="/assets/img/hamburgerIcon.svg" alt="Menu" id="hamburger-open" />
6093
<div class="moosync__navbar-mobileScreen-overlayClose flex__center slide__bottom" id="menu-overlay">
61-
<img src="/assets/img/hamburgerCloseIcon.svg" alt="Close" id="hamburger-close" />
94+
<img loading="lazy" src="/assets/img/hamburgerCloseIcon.svg" alt="Close" id="hamburger-close" />
6295
<ul class="moosync__navbar-mobileScreen-links">
6396
<li class="p__normal" id="home"><a href="#">Home</a></li>
6497
<li class="p__normal" id="privacy">
@@ -85,18 +118,18 @@
85118
For the community</span>
86119
<div class="circle__div__container">
87120
<div class="music__person__img__container">
88-
<img id="music__person__img" src="/assets/img/person.svg" alt="" />
121+
<img loading="lazy" id="music__person__img" loading="lazy" src="/assets/img/person.svg" alt="" />
89122
</div>
90123
<div id="circle__div__1" class="circle__div">
91124
<div id="circle__div__2" class="circle__div"></div>
92125
</div>
93126
<div id="circle__div__3" class="circle__div">
94-
<audio id="music"
95-
src="https://res.cloudinary.com/thepranaygupta/video/upload/v1643119296/moosync/bg-music_x3sspk.mp3"
96-
type="audio/mpeg" volume="0.2"></audio>
127+
<audio id="music" src="" type="audio/mpeg" volume="0.2"></audio>
97128
<div class="playbutton__container">
98-
<img src="/assets/img/musicbutton.svg" title="Play" alt="" class="play__button__img" id="playButton" />
99-
<img src="/assets/img/playbutton.svg" title="Play" alt="" class="play__button__icon" id="playButtonIcon" />
129+
<img loading="lazy" src="/assets/img/musicbutton.svg" title="Play" alt="" class="play__button__img"
130+
id="playButton" />
131+
<img loading="lazy" src="/assets/img/playbutton.svg" title="Play" alt="" class="play__button__icon"
132+
id="playButtonIcon" />
100133
</div>
101134
</div>
102135
</div>
@@ -112,7 +145,7 @@
112145
Download for ${os}
113146
<div class="version__text">${version}</div>
114147
</div>
115-
<img class="arrow__down" src="/assets/img/arrow-down.svg" alt="down arrow" />
148+
<img loading="lazy" class="arrow__down" src="/assets/img/arrow-down.svg" alt="down arrow" />
116149
</div>
117150
</div>
118151
</div>
@@ -135,34 +168,34 @@
135168
</p>
136169
<div class="usage__icons__text">
137170
<span class="usage">
138-
<img src="/assets/img/usageIcon1.svg" alt="" class="usage__icons" />
171+
<img loading="lazy" src="/assets/img/usageIcon1.svg" alt="" class="usage__icons" />
139172
<span class="info__text__4">Customizable theme engine & Easy to use interface</span>
140173
</span>
141174
<span class="usage">
142-
<img src="/assets/img/usageIcon2.svg" alt="" class="usage__icons" />
175+
<img loading="lazy" src="/assets/img/usageIcon2.svg" alt="" class="usage__icons" />
143176
<span class="info__text__4">Develop own apps on top of Moosync Extension API</span>
144177
</span>
145178
</div>
146179
<div id="usage__icons__text__mid" class="usage__icons__text">
147180
<span id="usage__mid" class="usage">
148-
<img src="/assets/img/usageIcon3.svg" alt="" class="usage__icons" />
181+
<img loading="lazy" src="/assets/img/usageIcon3.svg" alt="" class="usage__icons" />
149182
<span class="info__text__4">Seamlessly integrate your Spotify and Youtube playlists.</span>
150183
</span>
151184
<span class="usage">
152-
<img src="/assets/img/laptopbg.svg" alt="" id="usage__mid__img" />
185+
<img loading="lazy" src="/assets/img/laptopbg.svg" alt="" id="usage__mid__img" />
153186
</span>
154187
<span id="usage__mid" class="usage">
155-
<img src="/assets/img/usageIcon4.svg" alt="" class="usage__icons" />
188+
<img loading="lazy" src="/assets/img/usageIcon4.svg" alt="" class="usage__icons" />
156189
<span class="info__text__4">Play songs directly from Youtube and Spotify</span>
157190
</span>
158191
</div>
159192
<div class="usage__icons__text">
160193
<span class="usage">
161-
<img src="/assets/img/usageIcon5.svg" alt="" class="usage__icons" />
194+
<img loading="lazy" src="/assets/img/usageIcon5.svg" alt="" class="usage__icons" />
162195
<span class="info__text__4">Track your music with LastFm and get recommendations</span>
163196
</span>
164197
<span class="usage">
165-
<img src="/assets/img/usageIcon6.svg" alt="" class="usage__icons" />
198+
<img loading="lazy" src="/assets/img/usageIcon6.svg" alt="" class="usage__icons" />
166199
<span class="info__text__4">Add Spotify and Youtube tracks and playlists by URLs</span>
167200
</span>
168201
</div>
@@ -190,12 +223,12 @@
190223
<div id="moosync__numbers__button" class="buttons">
191224
<a href="https://discord.gg/HsbqbRune3" target="_blank" rel="noopener noreferrer">
192225
<button title="Join us on Discord" class="link__buttons">
193-
<img src="/assets/img/discordLogo.svg" alt="" class="icons" id="discord__icon" />Join Discord
226+
<img loading="lazy" src="/assets/img/discordLogo.svg" alt="" class="icons" id="discord__icon" />Join Discord
194227
</button>
195228
</a>
196229
<a href="https://github.com/Moosync/Moosync" target="_blank" rel="noopener noreferrer">
197230
<button title="Contribute to Moosync" class="link__buttons">
198-
<img src="/assets/img/githubIcon.svg" alt="" class="icons" id="discord__icon" />Contribute
231+
<img loading="lazy" src="/assets/img/githubIcon.svg" alt="" class="icons" id="discord__icon" />Contribute
199232
</button>
200233
</a>
201234
</div>
@@ -205,7 +238,7 @@
205238
<div id="left__footer__content" class="footer__content">
206239
<a href="#home__page">
207240
<span class="title__logo">
208-
<img src="/assets/img/logo.svg" title="Moosync" alt="" id="footer__logo" class="logo__img" />
241+
<img loading="lazy" src="/assets/img/logo.svg" title="Moosync" alt="" id="footer__logo" class="logo__img" />
209242
<span class="title">moosync</span>
210243
</span>
211244
</a>
@@ -215,7 +248,7 @@
215248
<a href="mailto:support@moosync.app">
216249
<p class="info__text__3">
217250
support@moosync.app
218-
<img src="/assets/img/link.svg" alt="" id="link__icon" />
251+
<img loading="lazy" src="/assets/img/link.svg" alt="" id="link__icon" />
219252
</p>
220253
</a>
221254
</div>
@@ -272,72 +305,6 @@
272305
</div>
273306
<span id="copyright__text">Copyright &copy; 2022 Moosync</span>
274307
</footer>
275-
276-
<!-- Login modal-->
277-
<div id="login-modal" class="modal">
278-
<!-- Modal content -->
279-
<div class="modal-content">
280-
<span id="login-modal-close" class="close">&times;</span>
281-
<div id="login-modal-postlogin">
282-
<div class="modal-content-text" id="login-modal-content">
283-
Thank you for logging in to
284-
<span id="login-modal-platform-text-post">${platform}</span>.<br />
285-
You may now close this window<br />
286-
and enjoy your experience.
287-
<br />
288-
<br />
289-
Alternatively, You may enter this code
290-
<div id="oauth-code" class="oauth-code"></div>
291-
292-
</div>
293-
294-
295-
</div>
296-
297-
<div id="login-modal-prelogin">
298-
<p class="modal-content-text" id="login-modal-content">
299-
Do you want to login to
300-
<span id="login-modal-platform-text-pre">${platform}</span>?
301-
<button title="Login" id="login-button" class="link__buttons login__button">
302-
Click to open Moosync
303-
</button>
304-
</p>
305-
</div>
306-
</div>
307-
</div>
308-
309-
<!-- Start Single Page Apps for GitHub Pages -->
310-
<script type="text/javascript">
311-
// Single Page Apps for GitHub Pages
312-
// MIT License
313-
// https://github.com/rafgraph/spa-github-pages
314-
// This script checks to see if a redirect is present in the query string,
315-
// converts it back into the correct url and adds it to the
316-
// browser's history using window.history.replaceState(...),
317-
// which won't cause the browser to attempt to load the new url.
318-
// When the single page app is loaded further down in this file,
319-
// the correct url will be waiting in the browser's history for
320-
// the single page app to route accordingly.
321-
; (function (l) {
322-
if (l.search[1] === "/") {
323-
var decoded = l.search
324-
.slice(1)
325-
.split("&")
326-
.map(function (s) {
327-
return s.replace(/~and~/g, "&")
328-
})
329-
.join("?")
330-
window.history.replaceState(
331-
null,
332-
null,
333-
l.pathname.slice(0, -1) + decoded + l.hash
334-
)
335-
}
336-
})(window.location)
337-
</script>
338-
<!-- End Single Page Apps for GitHub Pages -->
339-
340-
<script src="/assets/js/index.js" type="module"></script>
341308
</body>
342309

343310
</html>

0 commit comments

Comments
 (0)