漫画图片网站自动触发懒加载

Created at 17 hours ago
Updated at 17 hours ago
智能滚动触发懒加载,控制面板自动隐藏为边缘竖线,支持自动开始、速度调节、暂停/继续
Total Installs
10
Today's New
+3
User Rating
- / 5.0 (0)
Current Version
1.1
Script Details
Applicable Sites
LicenseMIT

这是一个用于漫画/图片网站的智能自动滚动脚本,主要目的是触发网页的懒加载机制,让所有图片自动加载出来,方便一次性阅读。好的,我来全面介绍这个脚本的完整功能。

🎯 脚本功能介绍

📌 一句话概括

漫画图片网站智能自动滚动器 — 自动滚动页面触发懒加载图片,控制面板自动隐藏为边缘竖线,支持多种调节和快捷键。


🎛️ 功能全景图

┌─────────────────────────────────────────────────────┐
│                    功能体系                          │
├─────────────┬─────────────┬────────────┬────────────┤
│  滚动控制   │  懒加载触发  │  面板交互  │  快捷操作  │
├─────────────┼─────────────┼────────────┼────────────┤
│ ▶ 自动滚动  │ 🔍 智能检测 │ 🫥 自动隐藏│ ⌨ 空格暂停 │
│ ⏸ 暂停继续 │ ⏳ 延迟等待 │ 📏 竖线指示│ ⬆ 回到顶部 │
│ ⚙ 速度调节 │ 🔄 假底识别 │ 🖱 边缘唤出│ ⬇ 直达底部 │
│ 📐 距离调节 │ 🔁 循环回顶 │ 💾 设置记忆│ 🅰 自动开关 │
└─────────────┴─────────────┴────────────┴────────────┘

一、🎮 核心功能

1. 智能自动滚动

功能 说明
自动开始 页面加载后自动开始滚动(可关闭)
暂停/继续 点击按钮或按空格键切换
速度调节 50ms ~ 5000ms 范围,默认 300ms
距离调节 100px ~ 2000px 范围,默认 600px
平滑滚动 使用 smooth 行为,视觉流畅

2. 懒加载智能触发

这是脚本最独特的功能:

普通滚动:一直滚到底就停了 ❌
                    ↓
智能滚动:滚到底部 → 等待500ms → 检测高度变化
                              ↓
                    ┌─ 高度增加 → 懒加载成功,继续滚 ✅
                    └─ 高度不变 → 真到底了,回顶部重来 ✅

解决的问题:

  • 漫画网站通常用懒加载,一次性滚动太快会跳过未加载的图片
  • 脚本会"等一等"让图片加载出来,然后再继续

3. 循环模式

到达真正底部后,自动回到顶部重新开始,适合:

  • 需要反复浏览
  • 等待新内容动态加载
  • 测试页面完整加载情况

二、🖥️ 控制面板

面板布局

┌────────────────────┐
│    ⏸ 暂停 (绿色)    │  ← 主控按钮,点击切换
│    ▶ 继续 (红色)    │     状态自动变色
├────────────────────┤
│ ⏱ 间隔: [300] ms  │  ← 数字输入框
│ 📏 距离: [600] px  │  ← 数字输入框
├────────────────────┤
│  ⬆ 回到顶部        │  ← 快捷跳转按钮
│  ⬇ 直达底部        │
├────────────────────┤
│ 🚀 自动开始  [开]  │  ← 切换开关
│ 🫥 自动隐藏  [开]  │
├────────────────────┤
│  "滚动中... (12次)" │  ← 实时状态显示
└────────────────────┘

面板自动隐藏

  • 2秒后自动滑出屏幕,变成一条绿色竖线
  • 竖线带脉冲发光动画,不显眼但可发现
  • 触发唤出的方式:
    • 🖱 鼠标悬停竖线
    • 🖱 鼠标靠近屏幕左边缘 30px
    • 🖱 点击竖线区域
  • 唤出后面板平滑滑入,操作完离开后半秒自动隐藏

三、⌨️ 键盘快捷键

快捷键 功能 使用场景
空格 暂停/继续滚动 看到想看的画面立刻暂停
Ctrl + ↑ 回到顶部 快速返回开头
Ctrl + ↓ 直达底部 一次性触发所有懒加载
Ctrl + Shift + H 切换自动隐藏 想固定面板时关闭隐藏
Ctrl + Shift + A 切换自动开始 不想自动滚动时关闭

⚠️ 在输入框中不会触发快捷键,避免打字冲突


四、💾 设置记忆

  • 自动开始偏好保存在浏览器 localStorage
  • 下次打开同一网站自动应用上次设置
  • 即使清除缓存也不会丢失(除非清除站点数据)

五、🎨 视觉效果

元素 效果
面板背景 暗色半透明 + 毛玻璃模糊
暂停按钮 绿色(运行)/ 红色(暂停)
隐藏竖线 4px 宽绿色渐变 + 脉冲光晕
按钮悬停 右移 2px 微动效
面板动画 cubic-bezier 缓动曲线
滚动动画 CSS smooth 平滑过渡

六、🛡️ 健壮性设计

措施 目的
页面卸载清理定时器 防止内存泄漏
Math.max 多值高度计算 兼容各种网页结构
localStorage try-catch 存储失败不影响功能
输入框聚焦禁用快捷键 避免操作冲突
DOMContentLoaded 等待 确保 DOM 就绪
响应式 @media 查询 小屏幕自适应

📊 典型使用流程

1. 打开漫画网站
       ↓
2. 脚本自动开始滚动(如开启自动开始)
       ↓
3. 画面自动向下,图片逐个加载
       ↓
4. 看到想细看的画面 → 按空格暂停
       ↓
5. 看完 → 按空格继续
       ↓
6. 到达底部 → 自动回顶循环
       ↓
7. 面板2秒后自动隐藏为竖线
       ↓
8. 需要调设置 → 鼠标靠左唤出面板