fix/animation lagging

This commit is contained in:
tangly1024
2023-03-12 16:39:50 +08:00
parent 1862012d69
commit 16fd9692fb
4 changed files with 6 additions and 12 deletions

View File

@@ -1,12 +1,13 @@
import BLOG from '@/blog.config' import BLOG from '@/blog.config'
import { isBrowser, loadExternalResource } from '@/lib/utils' import { loadExternalResource } from '@/lib/utils'
import { useEffect } from 'react'
/** /**
* 自定义引入外部JS 和 CSS * 自定义引入外部JS 和 CSS
* @returns * @returns
*/ */
const ExternalScript = () => { const ExternalScript = () => {
if (isBrowser()) { useEffect(() => {
// 静态导入本地自定义样式 // 静态导入本地自定义样式
loadExternalResource(BLOG.FONT_AWESOME, 'css') loadExternalResource(BLOG.FONT_AWESOME, 'css')
loadExternalResource('/css/custom.css', 'css') loadExternalResource('/css/custom.css', 'css')
@@ -25,7 +26,7 @@ const ExternalScript = () => {
BLOG.FONT_URL?.forEach(e => { BLOG.FONT_URL?.forEach(e => {
loadExternalResource(e, 'css') loadExternalResource(e, 'css')
}) })
} }, [])
return null return null
} }

View File

@@ -58,7 +58,7 @@ const MyApp = ({ Component, pageProps }) => {
useEffect(() => { useEffect(() => {
AOS.init() AOS.init()
smoothscroll.polyfill() smoothscroll.polyfill()
}) }, [])
return ( return (
<GlobalContextProvider> <GlobalContextProvider>

View File

@@ -100,7 +100,7 @@ const BlogPostCard = ({ post, showSummary, siteInfo }) => {
alt={post.title} alt={post.title}
className="h-full w-full hover:scale-125 transform object-cover duration-500" className="h-full w-full hover:scale-125 transform object-cover duration-500"
/> />
{/* <Image className='hover:scale-125 transform duration-500' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' /> */} {/* <Image className='hover:scale-125 transform duration-500' src={post?.page_cover} style={{ objectFit: 'cover' }} alt={post.title} fill loading='lazy' /> */}
</Link> </Link>
</div> </div>
)} )}

View File

@@ -23,18 +23,11 @@ const LayoutBase = props => {
const scrollListener = () => { const scrollListener = () => {
requestAnimationFrame(() => { requestAnimationFrame(() => {
// const targetRef = document.getElementById('wrapper')
// const clientHeight = targetRef?.clientHeight
const scrollY = window.pageYOffset const scrollY = window.pageYOffset
// const fullHeight = clientHeight - window.outerHeight
// let per = parseFloat(((scrollY / fullHeight) * 100).toFixed(0))
// if (per > 100) per = 100
const shouldShow = scrollY > 300 const shouldShow = scrollY > 300
console.log(scrollY)
if (shouldShow !== show) { if (shouldShow !== show) {
switchShow(shouldShow) switchShow(shouldShow)
} }
// changePercent(per)
}) })
} }
useEffect(() => { useEffect(() => {