ember-in-viewport 使用教程

ember-in-viewport 使用教程

ember-in-viewport Detect if an Ember View or Component is in the viewport @ 60FPS 项目地址: https://gitcode.com/gh_mirrors/em/ember-in-viewport

1. 项目介绍

ember-in-viewport 是一个用于检测 Ember 视图或组件是否在浏览器视口内的开源项目。它通过使用 IntersectionObserver API 来实现高性能的检测，并在不支持该 API 的情况下回退到 requestAnimationFrame、Ember 运行循环和事件监听器。该项目旨在帮助开发者实现诸如懒加载、广告曝光追踪和遮挡剔除等功能。

2. 项目快速启动

安装

首先，使用 ember-cli 安装 ember-in-viewport：

ember install ember-in-viewport

使用

在组件中注入 inViewport 服务，并开始监视 DOM 元素：

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';

export default class MyClass extends Component {
  @service inViewport;

  @action
  setupInViewport() {
    const loader = document.getElementById('loader');
    const viewportTolerance = { bottom: 200 };
    const [onEnter, _onExit] = this.inViewport.watchElement(loader, { viewportTolerance });

    onEnter(this.didEnterViewport.bind(this));
  }

  didEnterViewport() {
    // 当元素进入视口时执行的操作
    this.infinityLoad();
  }

  willDestroy() {
    // 清理缓存
    const loader = document.getElementById('loader');
    this.inViewport.stopWatching(loader);
    super.willDestroy(...arguments);
  }
}

在模板中使用：

<ul>
  <li></li>
</ul>
<div id="loader"></div>

3. 应用案例和最佳实践

懒加载响应式图片

ember-in-viewport 可以用于实现图片的懒加载。通过监听图片元素是否进入视口，动态加载图片资源，从而提升页面加载性能。

广告曝光追踪

在广告组件中使用 ember-in-viewport，可以实时追踪广告元素是否进入用户视口，从而统计广告曝光率。

遮挡剔除

在复杂页面中，可以使用 ember-in-viewport 来检测哪些元素在视口内，从而决定是否渲染这些元素，减少不必要的渲染开销。

4. 典型生态项目

ember-infinity

ember-infinity 是一个用于实现无限滚动的 Ember 插件，结合 ember-in-viewport 可以实现更高效的无限滚动加载。

ember-light-table

ember-light-table 是一个轻量级的表格组件库，结合 ember-in-viewport 可以实现表格的懒加载和性能优化。

通过以上模块的介绍和使用示例，开发者可以快速上手并应用 ember-in-viewport 项目，实现高性能的视口检测功能。

ember-in-viewport Detect if an Ember View or Component is in the viewport @ 60FPS 项目地址: https://gitcode.com/gh_mirrors/em/ember-in-viewport