Canvas: Erkennen, ob es im Browser sichtbar ist

Question

Ich habe eine Liste von Diagrammen. Ich verwende Chart.js, um diese Diagramme zu erstellen. Da meine Liste 1 bis 100 oder mehr Einträge haben kann, wäre die Initialisierung aller Diagramme auf einmal nicht schlau, da dies das UI für eine lange Zeit einfrieren würde. Stattdessen dachte ich, es wäre viel besser, nur die Diagramme zu initialisieren, die innerhalb der Ansichtsgrenzen des Browsers sichtbar sind, so dass beispielsweise nur das erste Diagramm initialisiert wird und wenn der Benutzer nach unten scrollt und das zweite Zeichenfeld sichtbar wird Initialisierung und so weiter.

Ich habe alles eingerichtet, aber das einzige Problem, das ich gerade habe, ist: Wie kann ich einen Eventlistener oder ähnliches erstellen, die ich jedem Canvas Element hinzufügen kann, das ausgelöst wird, wenn ein Canvas innerhalb der Ansichtsgrenzen des angezeigt wird browser, damit ich die Diagramminitialisierung für diese Leinwand durchführen kann?

Answer 1

Ich bin der Autor der OnScreen, eine kleine Bibliothek, die eine Callback-Funktion aufrufen kann, wenn ein HTMLElement das Ansichtsfenster oder die Grenzen seines Behälters gelangt.

// 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; 
    } 
}); 

Für weitere Informationen, nehmen Sie einen Blick auf die documentation. Vergessen Sie nicht, die demos repo für ein paar einfache Beispiele zu überprüfen.

Answer 2

Ich habe die onScreen jQuery Plugin verwendet.

Es ist sehr einfach. Sie müssen nur für jede Leinwand diese nennen:

$('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 
});