load chart.js as user scrolls

Question

Я использую chart.js, чтобы сделать несколько приятных перспективных холстов на странице. Я бы хотел, чтобы диаграммы загружались, когда пользователь прокручивает страницу вниз, как этот пример: http://www.chartjs.org

Я не могу найти на сайте информацию о том, как они это сделали. Я попытался настроить его самостоятельно, используя waypoints.js в качестве базы. Вот код, который я использовал

('.secTwo').waypoint(function(direction) { 
$('.hidden').removeClass('hidden'); 
}); 

В моем css .hidden установлен непрозрачность: 0. Это работает так, что диаграмма появляется, как только .secTwo попадает в верхнюю часть окна. Но диаграмма не оживляет, как пример выше. Он просто появляется.

Анимация работает только при загрузке страницы. Мне нужно, чтобы он работал, как только диаграмма видна на экране. Есть идеи?

Answer 1

Они используют модифицированную версию плагина jquery Remy Sharps, которая добавляет триггеры к событию «inview», когда пользователь просматривает ваш контент на виду.

https://github.com/zuk/jquery.inview/

Вы должны проверить лицензию Chart.js модифицированный код, прежде чем использовать его, но их источник доступен здесь:

http://www.chartjs.org/assets/effects.js

Плагин позволяет слушать для событий «inview», которые запускаются при прокрутке содержимого «вниз по странице».

Вот пример:

$("#polarAreaChart").on("inview",function(){ 

    var $this = $(this); 

    $this.removeClass("hidden").off("inview"); 

    setTimeout(showPolarAreaChart,graphInitDelay);   

});