Over Clusterize.js

Deze pagina gaat over het scrollen door lange lijsten met gegevens. Denk daarbij aan lijsten (tabellen, geordende en ongeordende lijsten, enz.).
Het gaat hier over lijsten met een paar duizend tot meer dan honderdduizend regels data; het zijn dus echt lange lijsten.

Werken met dit soort lijsten is voor de meesten van ons geen alledaagse bezigheid. Voor de weinigen die er wel mee te maken hebben is hier een oplossing die het werken met dit soort bulkdata een stuk aangenamer maakt.

Lijsten op het scherm zichtbaar maken om er doorheen te scrollen, doe je gewoonlijk in een <div> of <iframe> met scrollbars. Dat heeft het nadeel dat de HTML-DOM erg groot wordt door alle HTML-tags die je mee moet nemen. Dat heeft weer tot gevolg dat het scrollen door de data schokkerig verloopt. De hele pagina wordt traag.

De oorzaak is dat tag voor tag, regel voor regel, door de browser moet worden verwerkt. Dit kun je omzeilen door de lijst te verdelen in blokken (clusters) en blok voor blok te verwerken. Dat is wat clusterize.js doet.

Dit script is ontwikkeld door Denis Lukov, een ontwikkelaar uit de Oekraïne. De website over dit script is clusterize.js.org. Je vindt daar een redelijk uitgebreide handleiding. Op het moment dat dit wordt geschreven (augustus 2018) wordt het script niet (meer) actief onderhouden.

Je kunt het script downloaden van GitHub. Klik op de groene knop "Clone or download" en download de gezipte file Clusterize.js-master.zip. De zip-file bevat een aantal bestanden waarvan alleen clusterize.css, clusterize.js en clusterize.min.js nodig zijn om het in te bouwen in je website. De rest kun je vergeten, tenzij je met bower en/of node.js werkt. Dat valt echter buiten het bestek van deze website.

Voetangels en klemmen

Het toepassen van clusterize.js in je eigen site vraagt behoorlijk wat inspanning. Hoewel de code in beginsel eenvoudig is, wordt het heel lastig als je de basisinstellingen naar je eigen hand wilt zetten. Je verdwaalt gemakkelijk in de vele opties. Dat is ook de reden waarom er geen werkend voorbeeld op deze pagina staat.

Bij sommige browsers is het aantal regels met data beperkt tot ca. 250 000 en/of gaat het scrollen niet zonder horten en stoten, maar met clusterize.js werkt het beter dan zonder.