【免费下载链接】jquery.appear
jQuery plugin for tracking element's appearance in browser viewport
jquery.appear 是一款轻量级 jQuery 插件，专门用于追踪网页元素在浏览器视口中的出现（appear）与消失（disappear）。当你需要实现图片懒加载、视频滚动自动播放、广告曝光埋点等需求时，它只需几行代码即可搞定。本文将 jquery.appear 的 5 大实战场景完整梳理一遍，从安装到进阶技巧一次讲清。
为什么需要 jquery.appear？
现代网页越来越长：商品列表、信息流、广告位、长视频……这些内容如果一进页面就全部加载、全部执行，用户等待的只有白屏和卡顿。
jquery.appear 的思路非常直观：只有当元素真正滚入浏览器可视区域时，才触发你预设的事件。它的核心能力有 3 个：
| 能力 | 说明 |
|---|---|
appear 事件 | 元素进入视口时触发（0.6.0 起：可见期间只触发一次，重新可见可再次触发） |
disappear 事件 | 元素滚出视口时触发 |
:appeared 过滤器 | 手动判断某个元素当前是否在视口内 |
整个插件只有 index.js 一个核心源文件，代码量极小，MIT 协议开源（见 LICENSE），对任何项目都没有负担。
快速上手：安装与基本用法
一键安装
通过 npm 或 yarn 安装（包名为 jquery-appear-original，要求 jQuery >= 1.7，见 package.json）：
npm i -S jquery-appear-original
# 或
yarn add jquery-appear-original
也可以直接克隆源码仓库后引入本地文件：
git clone https://gitcode.com/gh_mirrors/jq/jquery.appear
3 行代码监视听口
调用全局方法 $.appear(selector, options) 注册需要监听的元素，然后监听事件即可（API 定义见 index.js）：
$.appear('.product-card');
$('.product-card').on('appear', function (event, $appeared) {
// 该卡片已进入浏览器视口
});
$('.product-card').on('disappear', function (event, $disappeared) {
// 该卡片已滚出视口
});
它支持两个可选参数（默认值见 index.js）：
interval：检查元素的轮询间隔，默认250毫秒force_process：注册后立即触发一次检查，适合首屏元素
💡 除了全局方法，
$('selector').appear()的链式写法同样可用，甚至支持传入被 jQuery 包裹的原始 DOM 节点。
场景一：图片懒加载，首屏秒开
长页面里有几百张图片，如果 HTML 一解析就全部开始下载，首屏速度会被拖垮。用 jquery.appear 可以轻松实现"滚到哪、加载到哪"：
<img class="lazy" data-src="images/long.jpg" src="images/placeholder.png">
$.appear('img.lazy');
$('img.lazy').on('appear', function () {
var $img = $(this);
$img.attr('src', $img.data('src')); // 进入视口才真正下载图片
$img.off('appear'); // 加载过一次就不再监听
});
效果：用户看不到的图片不下载，首屏资源大幅减少，页面打开速度明显提升。注意 0.6.0 版本后 appear 在元素可见期间只触发一次（见 CHANGELOG.md），天然适合"只加载一次"的懒加载逻辑，无需自己加防抖锁。
场景二：视频滚动到可视区自动播放
信息流里嵌入大量视频是最典型的性能杀手。借助 jquery.appear，可以让视频在用户滚动到可视区域时才自动播放，滚走后暂停，既节省流量又提升体验：
$.appear('.feed video');
$('.feed video').on('appear', function () {
this.play(); // 进入视口 → 自动播放
}).on('disappear', function () {
this.pause(); // 滚出视口 → 自动暂停
});
效果：屏幕外的视频不再"陪跑"消耗带宽，用户看到哪段播哪段。disappear 事件在这里非常关键——它是 jquery.appear 相比简单"滚动事件"方案的一大优势。
场景三：广告曝光埋点，按真实曝光计费
广告行业有一个重要概念：曝光（impression）不等于"广告在页面上"，而是"广告被用户真正看到了"。把整个广告列表 DOM 挂载就算一次曝光是不准确的，jquery.appear 正好能解决这个问题：
$.appear('.ad-slot');
$('.ad-slot').on('appear', function () {
var adId = $(this).data('ad-id');
// 在此调用你的统计接口
sendAnalytics('ad_impression', { adId: adId });
});
效果：只有当广告位真正滚进用户视口时才上报一次埋点，数据更真实，也避免了无意义的重复请求。配合 disappear 事件还可以记录"可见时长"，为更精细的计费策略提供数据支撑。
场景四：图表按需初始化，告别白屏卡顿
ECharts、Chart.js 这类图表库初始化并不便宜，一个页面挂 10 张图表，首屏渲染时间会被明显拉高。更聪明的做法是：图表容器进入视口时才初始化。
$.appear('.chart-panel');
$('.chart-panel').on('appear', function () {
var $panel = $(this);
if ($panel.data('chart-inited')) return; // 防止重复初始化
var chart = echarts.init(this);
chart.setOption($panel.data('option'));
$panel.data('chart-inited', true);
});
效果：首屏只渲染当前可见的 1~2 张图表，用户往下滚动时才陆续"长出来"，长报表、数据大屏类页面尤其实用。
场景五：滚动入场动画，提升页面质感
"元素滚入视口时淡入上移"是高端网站常见的交互细节。用 jquery.appear 不需要计算 scrollTop、offsetTop 做一堆比较，逻辑清爽得多：
$.appear('.fade-in-item');
$('.fade-in-item')
.on('appear', function () { $(this).addClass('is-visible'); })
.on('disappear', function () { $(this).removeClass('is-visible'); });
.fade-in-item { opacity: 0; transform: translateY(20px); transition: all .5s; }
.fade-in-item.is-visible { opacity: 1; transform: none; }
效果：元素滚入视口淡入，滚出后再隐藏，可循环往复，做出类似"轮播式"的滚动叙事效果。
进阶技巧：offset 预触发与手动检查
用 data-appear-top-offset 提前触发
图片懒加载场景下，"元素刚进入视口才加载"往往有点晚（用户会看到占位图闪一下）。jquery.appear 支持给元素添加 data-appear-top-offset（垂直）或 data-appear-left-offset（水平）属性，让事件提前在视口外指定像素内触发：
<img class="lazy" data-src="images/long.jpg" data-appear-top-offset="600">
上面的元素只需距离视口底部 600 像素以内，就会提前触发 appear 事件，为图片下载争取时间，用户基本感知不到加载延迟。判断逻辑源码见 index.js。
$.force_appear() 手动触发检查
插件默认只在窗口 scroll / resize 时检查元素状态。如果页面还停留在初始状态（没滚也没 resize），可以用 $.force_appear() 手动强制触发一次检查，比如弹窗关闭、内容重新布局之后（实现见 index.js）。
:appeared 过滤器手动判断
如果你只是想在某个时刻判断元素是否在视口内，而不想监听事件，可以用内置的自定义过滤器（见 index.js）：
if ($('.hero-banner').is(':appeared')) {
// 元素当前在视口内
}
API 速查表
| 用法 | 作用 |
|---|---|
$.appear(selector, options) | 注册要监控的元素选择器 |
$('selector').appear() | 链式调用注册监控 |
.on('appear', cb) | 元素进入视口时回调 |
.on('disappear', cb) | 元素离开视口时回调 |
$.force_appear() | 手动强制触发一次可见性检查 |
.is(':appeared') | 手动判断元素是否已在视口内 |
data-appear-top-offset | 垂直方向提前触发阈值（像素） |
data-appear-left-offset | 水平方向提前触发阈值（像素） |
版本说明与许可
当前版本为 0.6.2（2023 年前后维护，详见 CHANGELOG.md），相比旧版有两个值得注意的改动：
- 0.6.0（破坏性变更）：
appear事件在元素可见期间只触发一次，元素再次可见后才可能重新触发——这正是懒加载、曝光埋点最想要的行为； - 0.4 起：监控任意选择器统一改为
$.appear(selector)写法，并支持最新 jQuery。
项目基于 MIT 协议发布，作者信息见 AUTHORS.txt，包元数据见 bower.json 与 package.json。官方说明文档即仓库根目录的 README.md。
总结：一张表回顾 5 大场景
| # | 场景 | 核心 API | 核心价值 |
|---|---|---|---|
| 1 | 图片懒加载 | appear + data-appear-top-offset | 首屏提速、省流量 |
| 2 | 视频自动播放 | appear + disappear | 滚到才播，滚走即停 |
| 3 | 广告曝光埋点 | appear（只触发一次） | 真实曝光、精准计费 |
| 4 | 图表按需初始化 | appear + 防重复标记 | 降低首屏渲染压力 |
| 5 | 滚动入场动画 | appear + disappear + CSS | 页面质感升级 |
jquery.appear 用不到 150 行代码，把"元素是否可见"这个高频需求做成了开箱即用的事件。如果你的项目还在用 jQuery，以上 5 个场景基本可以直接照抄落地。
【免费下载链接】jquery.appear
jQuery plugin for tracking element's appearance in browser viewport
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
