fix lazy load placeholder display bug

This commit is contained in:
Spedon
2023-03-16 21:42:59 +08:00
parent 944af06dc4
commit 28ad9cb099
2 changed files with 11 additions and 13 deletions

View File

@@ -7,8 +7,7 @@ import {
type position, type position,
createImgElement, createImgElement,
calcImageIndex, calcImageIndex,
delay, delay
type imgElement
} from './utils' } from './utils'
import { thresholdSensitivityArray, thresholdIndex } from './thresholdCtl' import { thresholdSensitivityArray, thresholdIndex } from './thresholdCtl'
import { imgIndexSpanUpdate } from './indexDisp' import { imgIndexSpanUpdate } from './indexDisp'
@@ -27,8 +26,7 @@ export const layers: HTMLDivElement[] = [
// layers position caching // layers position caching
export const layersStyleArray: string[][] = [ export const layersStyleArray: string[][] = [
['0px', '0px', '0px', '0px', '0px'], ['0px', '0px', '0px', '0px', '0px'],
['0px', '0px', '0px', '0px', '0px'], ['0px', '0px', '0px', '0px', '0px']
['', '', '', '', '']
] ]
// global index for "activated" // global index for "activated"
@@ -39,10 +37,10 @@ let last: position = { x: 0, y: 0 }
// activate top image // activate top image
const activate = (index: number, x: number, y: number): void => { const activate = (index: number, x: number, y: number): void => {
const imgElem: imgElement = createImgElement(imagesArray[index], true) const imgElem: HTMLImageElement = createImgElement(imagesArray[index])
styleCache(x, y, imgElem.bgStyle, layersStyleArray) styleCache(x, y, layersStyleArray)
layersStyleSet(layersStyleArray, layers) layersStyleSet(layersStyleArray, layers)
FIFO(imgElem.image, layers) FIFO(imgElem, layers)
last = { x, y } last = { x, y }
} }

View File

@@ -64,7 +64,7 @@ export const overlayDisable = (): void => {
// handle close click // handle close click
async function handleCloseClick(): Promise<void> { async function handleCloseClick(): Promise<void> {
overlayDisable() overlayDisable()
layersStyleSet(layersStyleArray, layers, true, false) layersStyleSet(layersStyleArray, layers)
for (let i: number = 4; i >= 0; i--) { for (let i: number = 4; i >= 0; i--) {
layers[i].dataset.status = `r${4 - i}` layers[i].dataset.status = `r${4 - i}`
} }
@@ -72,21 +72,21 @@ async function handleCloseClick(): Promise<void> {
for (let i: number = 4; i >= 0; i--) { for (let i: number = 4; i >= 0; i--) {
layers[i].dataset.status = 'null' layers[i].dataset.status = 'null'
} }
layersStyleSet(layersStyleArray, layers, false, true) layersStyleSet(layersStyleArray, layers)
window.addEventListener('mousemove', handleOnMove) window.addEventListener('mousemove', handleOnMove)
} }
const handlePrevClick = (): void => { const handlePrevClick = (): void => {
globalIndexDec() globalIndexDec()
const imgIndex = calcImageIndex(globalIndex, imagesArrayLen) const imgIndex = calcImageIndex(globalIndex, imagesArrayLen)
FIFO(createImgElement(imagesArray[imgIndex], false).image, layers) FIFO(createImgElement(imagesArray[imgIndex]), layers)
imgIndexSpanUpdate(imgIndex + 1, imagesArrayLen) imgIndexSpanUpdate(imgIndex + 1, imagesArrayLen)
} }
const handleNextClick = (): void => { const handleNextClick = (): void => {
globalIndexInc() globalIndexInc()
const imgIndex = calcImageIndex(globalIndex, imagesArrayLen) const imgIndex = calcImageIndex(globalIndex, imagesArrayLen)
FIFO(createImgElement(imagesArray[imgIndex], false).image, layers) FIFO(createImgElement(imagesArray[imgIndex]), layers)
imgIndexSpanUpdate(imgIndex + 1, imagesArrayLen) imgIndexSpanUpdate(imgIndex + 1, imagesArrayLen)
} }
@@ -148,8 +148,8 @@ export const vwRefreshInit = (): void => {
} else { } else {
r.style.setProperty('--footer-height', '31px') r.style.setProperty('--footer-height', '31px')
} }
// recenter image // recenter image (only in overlay)
center(layers[4]) if (layers[4].dataset.status === 't0') center(layers[4])
}, },
{ passive: true } { passive: true }
) )