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: optimized zoom out image when scroll

This commit is contained in:
XPoet 2022-10-12 10:37:43 +08:00
parent 58941db28c
commit c0eb63d484
1 changed files with 20 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
source/js/utils.js
View File

@ -22,10 +22,10 @@ KEEP.initUtils = () => {
hasToc: false, hasToc: false,
initData() { initData() {
const { scroll, first_screen } = KEEP.theme_config.style const {scroll, first_screen} = KEEP.theme_config.style
this.isHasScrollProgressBar = scroll.progress_bar.enable === true this.isHasScrollProgressBar = scroll.progress_bar.enable === true
this.isHasScrollPercent = scroll.percent.enable === true this.isHasScrollPercent = scroll.percent.enable === true
const { enable, header_transparent } = first_screen const {enable, header_transparent} = first_screen
this.isHeaderTransparent = enable === true && header_transparent === true this.isHeaderTransparent = enable === true && header_transparent === true
}, },
@ -238,6 +238,7 @@ KEEP.initUtils = () => {
zoomInImage() { zoomInImage() {
let SIDE_GAP = 40 let SIDE_GAP = 40
let isZoomIn = false let isZoomIn = false
let curWinScrollY = 0
let selectedImgDom = null let selectedImgDom = null
const imgDomList = document.querySelectorAll('.markdown-body img') const imgDomList = document.querySelectorAll('.markdown-body img')
const zoomInImgMask = document.querySelector('.zoom-in-image-mask') const zoomInImgMask = document.querySelector('.zoom-in-image-mask')
@ -246,10 +247,10 @@ KEEP.initUtils = () => {
const zoomOut = () => { const zoomOut = () => {
if (isZoomIn) { if (isZoomIn) {
isZoomIn = false isZoomIn = false
curWinScrollY = 0
zoomInImg && (zoomInImg.style.transform = `scale(1)`) zoomInImg && (zoomInImg.style.transform = `scale(1)`)
zoomInImgMask && zoomInImgMask.classList.remove('show') zoomInImgMask && zoomInImgMask.classList.remove('show')
const timer = setTimeout(() => { setTimeout(() => {
clearTimeout(timer)
selectedImgDom && selectedImgDom.classList.remove('hide') selectedImgDom && selectedImgDom.classList.remove('hide')
}, 300) }, 300)
} }
@ -262,7 +263,9 @@ KEEP.initUtils = () => {
}) })
document.addEventListener('scroll', () => { document.addEventListener('scroll', () => {
if (isZoomIn && Math.abs(curWinScrollY - window.scrollY) >= 50) {
zoomOut() zoomOut()
}
}) })
} }
@ -281,6 +284,7 @@ KEEP.initUtils = () => {
zoomOutHandle() zoomOutHandle()
imgDomList.forEach((img) => { imgDomList.forEach((img) => {
img.addEventListener('click', () => { img.addEventListener('click', () => {
curWinScrollY = window.scrollY
isZoomIn = !isZoomIn isZoomIn = !isZoomIn
setSideGap() setSideGap()
zoomInImg.setAttribute('src', img.getAttribute('src')) zoomInImg.setAttribute('src', img.getAttribute('src'))
@ -402,7 +406,7 @@ KEEP.initUtils = () => {
const init = () => { const init = () => {
// tooltip // tooltip
document.querySelectorAll('.tooltip').forEach((element) => { document.querySelectorAll('.tooltip').forEach((element) => {
const { content, offsetX, offsetY } = element.dataset const {content, offsetX, offsetY} = element.dataset
let style = '' let style = ''
let sTop = '' let sTop = ''
@ -439,7 +443,7 @@ KEEP.initUtils = () => {
const loadImg = (img, imgLoaded) => { const loadImg = (img, imgLoaded) => {
const temp = new Image() const temp = new Image()
const { src } = img.dataset const {src} = img.dataset
temp.src = src temp.src = src
temp.onload = () => { temp.onload = () => {
img.src = src img.src = src
@ -449,7 +453,7 @@ KEEP.initUtils = () => {
} }
document.querySelectorAll('.tooltip-img').forEach((dom, idx) => { document.querySelectorAll('.tooltip-img').forEach((dom, idx) => {
const { imgUrl, name } = dom.dataset const {imgUrl, name} = dom.dataset
if (imgUrl) { if (imgUrl) {
const imgDomClass = `tooltip-img-${name}` const imgDomClass = `tooltip-img-${name}`
const nameIdx = `${name}_${idx}` const nameIdx = `${name}_${idx}`