Canvas：检测浏览器中是否可见

Question

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

我已经完成了所有设置，但现在唯一的问题是：如何创建一个事件侦听器或任何类似的东西，我可以将其添加到当画布在浏览器的视图边界内可见时触发的每个画布元素，以便我可以为该画布执行图表初始化吗？

Answer 1

我是 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;
    }
});

有关更多信息，请查看文档。不要忘记检查 demos repo 以获得几个简单的示例。

Answer 2

我使用了 onScreen jQuery 插件。

这很容易。您只需为每个画布调用以下命令即可：

$('elements').onScreen({
   container: window,
   direction: 'vertical',
   doIn: function() {
     // initialize canvas
   },
   doOut: function() {
     // Do something to the matched elements as they get off scren
   },
   tolerance: 0,
   throttle: 50,
   toggleClass: 'onScreen',
   lazyAttr: null,
   lazyPlaceholder: 'someImage.jpg',
   debug: false
});

Answer 3

我通常会画一些东西；画布就是一个例子。 Clean JS。在这里，您可以阅读更多有关其工作原理的信息。 https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

const canvases = document.querySelectorAll("canvas");
canvases.forEach( (canvas) => {
var options = {
      threshold: 0.01,
    };
var canvas_observer = new IntersectionObserver((entries, observer) => {
  // Loop through the entries
  for (const entry of entries) {
    // Check if the entry is intersecting the viewport
    if (entry.isIntersecting) {
            console.log("Intersected")
    }
    else{
            console.log("Exit")
    }
  }
}, options);
canvas_observer.observe(canvas);})