Question

我有一个图表列表。我使用Chart.js来创建这些图表。由于我的列表可以有1到100个或更多条目，因此一次初始化所有图表将不会很聪明，因为这会使ui冻结很长时间。所以相反我认为仅仅初始化那些在浏览器的视图范围内可见的图表会更好，这样例如只有第一个图表被初始化，当用户向下滚动而第二个画布变得可见时，第二个是初始化等等。

我有一切设置，但我现在唯一的问题是：我如何创建一个eventlistener或类似的东西，我可以添加到每个canvas元素，当画布在浏览器的视图边界内变得可见时触发这样我就可以为那个画布执行图表初始化了吗？

Answer 1

我是OnScreen的作者，OnScreen是一个小型库，可以在HTMLElement进入视口或其容器边界时调用回调函数。

// Uses ES6 syntax
import OnScreen from 'onscreen';

const os = new OnScreen();

os.on('enter', 'canvas', (element) => {
    if (!element.chartInitialized) {
        // Initialize the chart

        // Update the `chartInitialized` property
        // to avoid initializing it over and over
        element.chartInitialized = true;
    }
});

有关详细信息，请查看documentation。不要忘记查看demos repo几个简单示例。

Answer 2

我使用了onScreen jQuery插件。

这很容易。你只需要调用每个画布：

<attr name="subtitle"/>

画布：检测它是否在浏览器中可见

2 个答案: