lianglianglee
/
hexo-theme-keep
mirror of https://github.com/liangliangle/hexo-theme-keep.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

perf: optimize images lazyload

This commit is contained in:
XPoet 2022-10-04 23:52:46 +08:00
parent 89087d6963
commit 41e59293cb
5 changed files with 50 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
scripts/filters/lazyload-handle.js
View File

@ -1,19 +1,19 @@
/* global hexo */
'use strict'
hexo.extend.filter.register(
'after_post_render',
function (data) {
const theme = hexo.theme.config
if (!theme.lazyload || !theme.lazyload.enable) return
data.content = data.content.replace(
// Match 'img' tags width the src attribute.
// Match 'img' tags the src attribute.
/<img([^>]*)src="([^"]*)"([^>\/]*)\/?\s*>/gim,
function (match, attrBegin, src, attrEnd) {
// Exit if the src doesn't exists.
if (!src) return match
return `<img ${attrBegin}
lazyload
src="/images/loading.svg"
data-src="${src}"
${attrEnd}
>`

6
source/css/common/animated.styl
View File

@ -77,6 +77,12 @@ transition-t(property, delay, duration, function) {
}
}
@keyframes img-loading-animation {
to {
transform rotate(1turn)
}
}
.title-hover-animation {
position relative
display inline-block

40
source/css/common/basic.styl
View File

@ -119,10 +119,44 @@ a {
// ======================================================================
img {
&[lazyload] {
margin 1.4rem auto !important
padding 0.8rem
position relative
box-sizing border-box
width 8rem
height 8rem
box-shadow none !important
cursor not-allowed
pointer-events none
&::before {
position absolute
top 0
left 0
display block
width 100%
height 100%
background var(--background-color)
content ''
transition-t("background", "0", "0.2", "ease")
}
&::after {
position absolute
top 0
right 0
bottom 0
left 0
display block
width 2rem
height 2rem
margin auto
border 2px solid var(--fourth-text-color)
border-top-color var(--selection-color)
border-left-color var(--selection-color)
border-radius 50%
animation img-loading-animation 750ms infinite linear
content ''
transition-t("border", "0", "0.2", "ease")
}
}
}
@ -242,8 +276,8 @@ button {
justify-content center
box-sizing border-box
min-height 6rem
padding 0.2rem
background var(--fourth-text-color)
border 0.2rem solid var(--default-text-color)
border-radius 0.3rem
transform translateX(-50%) translateY(-100%)
transition-t("display", "0", "0.2", "ease")

60
source/images/loading.svg
View File

@ -1,60 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="80px" height="80px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<g transform="translate(80,50)">
<g transform="rotate(0)">
<circle cx="0" cy="0" r="6" fill="#c8c8c8" fill-opacity="1">
<animateTransform attributeName="transform" type="scale" begin="-1.1217948717948718s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite"></animateTransform>
<animate attributeName="fill-opacity" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite" values="1;0" begin="-1.1217948717948718s"></animate>
</circle>
</g>
</g><g transform="translate(71.21320343559643,71.21320343559643)">
<g transform="rotate(45)">
<circle cx="0" cy="0" r="6" fill="#c8c8c8" fill-opacity="0.875">
<animateTransform attributeName="transform" type="scale" begin="-0.9615384615384615s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite"></animateTransform>
<animate attributeName="fill-opacity" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite" values="1;0" begin="-0.9615384615384615s"></animate>
</circle>
</g>
</g><g transform="translate(50,80)">
<g transform="rotate(90)">
<circle cx="0" cy="0" r="6" fill="#c8c8c8" fill-opacity="0.75">
<animateTransform attributeName="transform" type="scale" begin="-0.8012820512820512s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite"></animateTransform>
<animate attributeName="fill-opacity" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite" values="1;0" begin="-0.8012820512820512s"></animate>
</circle>
</g>
</g><g transform="translate(28.786796564403577,71.21320343559643)">
<g transform="rotate(135)">
<circle cx="0" cy="0" r="6" fill="#c8c8c8" fill-opacity="0.625">
<animateTransform attributeName="transform" type="scale" begin="-0.641025641025641s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite"></animateTransform>
<animate attributeName="fill-opacity" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite" values="1;0" begin="-0.641025641025641s"></animate>
</circle>
</g>
</g><g transform="translate(20,50.00000000000001)">
<g transform="rotate(180)">
<circle cx="0" cy="0" r="6" fill="#c8c8c8" fill-opacity="0.5">
<animateTransform attributeName="transform" type="scale" begin="-0.4807692307692307s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite"></animateTransform>
<animate attributeName="fill-opacity" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite" values="1;0" begin="-0.4807692307692307s"></animate>
</circle>
</g>
</g><g transform="translate(28.78679656440357,28.786796564403577)">
<g transform="rotate(225)">
<circle cx="0" cy="0" r="6" fill="#c8c8c8" fill-opacity="0.375">
<animateTransform attributeName="transform" type="scale" begin="-0.3205128205128205s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite"></animateTransform>
<animate attributeName="fill-opacity" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite" values="1;0" begin="-0.3205128205128205s"></animate>
</circle>
</g>
</g><g transform="translate(49.99999999999999,20)">
<g transform="rotate(270)">
<circle cx="0" cy="0" r="6" fill="#c8c8c8" fill-opacity="0.25">
<animateTransform attributeName="transform" type="scale" begin="-0.16025641025641024s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite"></animateTransform>
<animate attributeName="fill-opacity" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite" values="1;0" begin="-0.16025641025641024s"></animate>
</circle>
</g>
</g><g transform="translate(71.21320343559643,28.78679656440357)">
<g transform="rotate(315)">
<circle cx="0" cy="0" r="6" fill="#c8c8c8" fill-opacity="0.125">
<animateTransform attributeName="transform" type="scale" begin="0s" values="1.5 1.5;1 1" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite"></animateTransform>
<animate attributeName="fill-opacity" keyTimes="0;1" dur="1.282051282051282s" repeatCount="indefinite" values="1;0" begin="0s"></animate>
</circle>
</g>
</g>
<!-- [ldio] generated by https://loading.io/ --></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 4.3 KiB

5
source/js/utils.js
View File

@ -374,8 +374,9 @@ KEEP.initUtils = () => {
const { src } = img.dataset
temp.src = src
temp.onload = () => {
imgLoaded = true
img.src = src
img.removeAttribute('lazyload')
imgLoaded = true
}
}
@ -384,7 +385,7 @@ KEEP.initUtils = () => {
if (imgUrl) {
const imgDomClass = `tooltip-img-${name}`
const nameIdx = `${name}_${idx}`
const imgDom = `<img class="${imgDomClass}" src="./images/loading.svg" data-src="${imgUrl}" alt="${name}">`
const imgDom = `<img class="${imgDomClass}" lazyload data-src="${imgUrl}" alt="${name}">`
const imgTooltipBox = `<div class="tooltip-img-box">${imgDom}</div>`
imgsSet[nameIdx] = {