AJAX无限滚动实现
用户URL直达或PJAX路由到页面
↓
加载HTML(首屏10篇文章)
├─ 优先请求前三张图片,其它loadlazy
↓
加载JS库(jQuery → hljs → KaTeX → Fancybox)
↓
执行initMain()
├─ hljs.highlightAll()
├─ renderMathInElement(首屏文章)
├─ fancybox初始化
├─ 监听图片加载
↓
用户滚动到底部(距离 300px)
↓
触发AJAX逻辑 loadMorePosts()
├─ fetch请求下一分页
├─ 解析HTML
├─ 提取.post元素
├─ 插入到DOM
├─ hljs.highlightElement(新文章)
├─ renderMathInElement(新文章)
├─ fancybox(新画廊)
├─ 监听图片加载
↓
继续滚动,重复加载
├─ fetch请求404(无新分页)
└─ 移除滚动监听器,加载渲染结束
仅代表个人观点,版权归作者所有。
内容可能经过LLM进行Markdown排版。
如若转载,请注明出处:https://blog.api.mlyr.top/index.php/archives/203/
如若转载,请注明出处:https://blog.api.mlyr.top/index.php/archives/203/
- 上一篇:Markdown多语种测试
- 下一篇:应力函数