Холст: Обнаружить, если он виден в браузере

Question

У меня есть список графиков. Я использую Chart.js для создания этих диаграмм. Поскольку у моего списка может быть от 1 до 100 или более записей, инициализирующих все графики сразу, это не будет разумно, потому что это заставит замораживание ui надолго. Поэтому вместо этого я подумал, что было бы намного лучше только инициализировать те диаграммы, которые видны внутри границ обзора браузера, так что, например, инициализируется только первая диаграмма, а когда пользователь прокручивает вниз, а второй холст становится видимым, второй - получение инициализации и так далее.

У меня есть все настройки, но единственная проблема, с которой я имею прямо сейчас: как я могу создать eventlistener или что-нибудь подобное, которое я могу добавить к каждому элементу canvas, который запускается, когда холст становится видимым внутри границ представления браузера, чтобы я мог выполнить инициализацию графика для этого холста?

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

Для получения дополнительной информации, посмотрите на documentation. Не забудьте проверить demos repo на пару простых примеров.

Answer 2

Я использовал плагин jQuery onScreen.

Очень легко. Вам просто нужно позвонить для каждого холста этого:

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