OpenSourceJoker/Moe-Counter
3
0
Fork 0
Code Issues 3 Pull Requests 4 Actions Packages Projects Releases Wiki Activity

feat(web): Add lazyload

Browse Source
This commit is contained in:
journey-ad 2024-10-21 12:22:51 +08:00
parent 440c6e9f72
commit d4ad5fad3d
5 changed files with 87 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/img/failed.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><style>@media (prefers-color-scheme:dark){svg{filter:invert(1)}}</style><path d="M170.667 469.333c4.266 4.267 12.8 8.534 21.333 8.534s17.067 0 21.333-8.534l64-64 64 64c4.267 4.267 12.8 8.534 21.334 8.534s17.066 0 21.333-8.534c12.8-12.8 12.8-34.133 0-46.933l-59.733-59.733 59.733-64c12.8-12.8 12.8-29.867 0-42.667s-29.867-12.8-42.667 0l-64 59.733-64-59.733c-12.8-12.8-29.866-12.8-42.666 0s-12.8 29.867 0 42.667l64 64-64 64c-12.8 12.8-12.8 29.866 0 42.666z"/><path d="M917.333 85.333H106.667C46.933 85.333 0 132.267 0 192v640c0 59.733 46.933 106.667 106.667 106.667h810.666C977.067 938.667 1024 891.733 1024 832V192c0-59.733-46.933-106.667-106.667-106.667zm-810.666 85.334h810.666c12.8 0 21.334 8.533 21.334 21.333v477.867L686.933 435.2c-17.066-17.067-42.666-17.067-59.733 0L405.333 657.067l-102.4-102.4c-17.066-17.067-38.4-17.067-55.466-4.267L85.333 686.933V192c0-12.8 8.534-21.333 21.334-21.333zm810.666 682.666H106.667c-12.8 0-21.334-8.533-21.334-21.333v-34.133l187.734-149.334 102.4 102.4c17.066 17.067 42.666 17.067 59.733 0l221.867-221.866L934.4 789.333V832c4.267 12.8-4.267 21.333-17.067 21.333z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
assets/img/loading.svg Normal file
View File

@ -0,0 +1 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>@keyframes _xe7Q{93.75%,to{r:3px}46.875%{r:.2px}}._b2T7{animation:_xe7Q .8s linear infinite}@media (prefers-color-scheme:dark){svg{filter:invert(1)}}</style><circle class="_b2T7" cx="4" cy="12" r="3"/><circle class="_b2T7" cx="12" cy="12" r="3" style="animation-delay:-.65s"/><circle class="_b2T7" cx="20" cy="12" r="3" style="animation-delay:-.5s"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 446 B

56
assets/script.js
View File

@ -105,7 +105,63 @@
}
})();
(() => {
function lazyLoad(options = {}) {
const {
selector = 'img[data-src]:not([src])',
loading = '',
failed = '',
rootMargin = '200px',
threshold = 0.01
} = options;
const images = document.querySelectorAll(selector);
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
observer.unobserve(img);
if (failed) {
const handleError = () => {
img.onerror = null;
img.src = failed;
img.setAttribute('data-failed', '');
};
img.onerror = handleError;
}
img.removeAttribute('data-loading');
img.src = img.getAttribute('data-src');
}
});
}, { rootMargin, threshold });
images.forEach(img => {
if (loading) {
img.src = loading;
img.setAttribute('data-loading', '');
}
observer.observe(img);
});
}
const lazyLoadOptions = {
selector: 'img[data-src]:not([src])',
loading: '/img/loading.svg',
failed: '/img/failed.svg',
rootMargin: '200px',
threshold: 0.01
};
if (document.readyState === 'loading') {
document.addEventListener("DOMContentLoaded", () => lazyLoad(lazyLoadOptions));
} else {
lazyLoad(lazyLoadOptions);
}
})();
// back to top
(() => {
let isShow = false;
let lock = false;

9
assets/style.css
View File

@ -1,3 +1,12 @@
html {
scroll-padding: 50px 0;
}
img[data-loading],
img[data-failed] {
width: 40px;
}
@media screen and (min-width: 800px) {
body {
max-width: min(90%, 800px);

65
views/index.pug
View File

@ -23,14 +23,7 @@ html
}
script.
var __global_data = {
site: "#{site}"
};
style.
html {
scroll-padding: 50px 0;
}
var __global_data = { site: "#{site}" };
body
h1#main_title(style='margin-top: 0.5em;')
@ -60,23 +53,18 @@ html
each theme in Object.keys(themeList)
div.item(data-theme=theme)
h5 #{theme}
img(src=`${site}/@demo?theme=${theme}` alt=theme)
img(data-src=`${site}/@demo?theme=${theme}` alt=theme)
h3 Credits
ul
li
a(href='https://glitch.com/', target='_blank', rel='nofollow') Glitch
li
a(href='https://space.bilibili.com/703007996', target='_blank', title='A-SOUL_Official') A-SOUL
li
a(href='https://github.com/moebooru/moebooru', target='_blank', rel='nofollow') moebooru
li: a(href='https://glitch.com/', target='_blank', rel='nofollow') Glitch
li: a(href='https://space.bilibili.com/703007996', target='_blank', title='A-SOUL_Official') A-SOUL
li: a(href='https://github.com/moebooru/moebooru', target='_blank', rel='nofollow') moebooru
li
a(href='javascript:alert("!!! NSFW LINK !!!\\nPlease enter the url manually")') gelbooru.com
| NSFW
li
a(href='https://icons8.com/icon/80355/star', target='_blank', rel='nofollow') Icons8
span
i And all booru site...
li: a(href='https://icons8.com/icon/80355/star', target='_blank', rel='nofollow') Icons8
span: i And all booru site...
h3 Tool
.tool
@ -88,14 +76,11 @@ html
th Value
tbody
tr
td
code name
td: code name
td Unique counter name
td
input#name(type='text', placeholder=':name')
td: input#name(type='text', placeholder=':name')
tr
td
code theme
td: code theme
td Select a counter image theme, default is
code moebooru
td
@ -104,40 +89,30 @@ html
each theme in Object.keys(themeList)
option(value=theme) #{theme}
tr
td
code padding
td: code padding
td Set the minimum length, between 1-32, default is
code 7
td
input#padding(type='number', value='7', min='1', max='32', step='1', oninput='this.value = this.value.replace(/[^0-9]/g, "")')
td: input#padding(type='number', value='7', min='1', max='32', step='1', oninput='this.value = this.value.replace(/[^0-9]/g, "")')
tr
td
code offset
td: code offset
td Set the offset pixel value, between -500-500, default is
code 0
td
input#offset(type='number', value='0', min='-500', max='500', step='1', oninput='this.value = this.value.replace(/[^0-9|\-]/g, "")')
td: input#offset(type='number', value='0', min='-500', max='500', step='1', oninput='this.value = this.value.replace(/[^0-9|\-]/g, "")')
tr
td
code scale
td: code scale
td Set the image scale, between 0.1-2, default is
code 1
td
input#scale(type='number', value='1', min='0.1', max='2', step='0.1', oninput='this.value = this.value.replace(/[^0-9|\.]/g, "")')
td: input#scale(type='number', value='1', min='0.1', max='2', step='0.1', oninput='this.value = this.value.replace(/[^0-9|\.]/g, "")')
tr
td
code pixelated
td: code pixelated
td Enable pixelated mode, Enum 0/1, default is
code 1
td
input#pixelated(type='checkbox', checked, style='margin: .5rem .75rem;')
td: input#pixelated(type='checkbox', checked, style='margin: .5rem .75rem;')
tr
td
code darkmode
td: code darkmode
td Enable dark mode, Enum 0/1/auto, default is
code auto
td
select#darkmode(name="darkmode")
td: select#darkmode(name="darkmode")
option(value="auto", selected) auto
option(value="1") yes
option(value="0") no