Recommended update: Lazy loading support

[zaxbowow]

I added something to the plugin that I think should become an integrated feature as it provides a major performance boost: Lazy-loading. This allows one to have thousands of slab-text marquee headlines on a page while reducing the performance impact to a bare minimum. The UX on pages with too many slab-text headlines - especially mobile or orientation change, but also desktop with viewport resizing - is poor without this.

To do this is not complicated; here is how I did it: Within a div with class "marquee", I have hundreds of bootstrap 4 cards (with class "card-board"), each having their own individual slab-text headlines.

In the page CSS, I added two rules that collapse or show the container holding the slab-text, based upon whether the "visible" class has been added to the cards:

div.marquee div.card .card-block div.name-and-logo { visibility: collapse; }
div.marquee div.card.visible .card-block div.name-and-logo { visibility: visible; }

At the end of jquery.slabtext.js, I added an IntersectionObserver that toggles the visible class for cards that come into view:

// Hide Card divs that aren't in the viewport
// this is the target which is observed
var marquees = document.querySelectorAll('.card-board');

// configure the intersection observer instance
const config = {
    // If marquees gets within 50px, make it visible so fonts are stretched
    rootMargin: '50px 0px',
    threshold: 0.01
};

let observer = new IntersectionObserver(onIntersection, config);
marquees.forEach(marquee => {
    observer.observe(marquee);
});

function onIntersection(entries) {
    entries.forEach(entry => {
        entry.target.classList.toggle('visible', entry.intersectionRatio > 0);
    });
}

Finally, I modified $.fn.slabText to resizeSlabs on scroll events, in addition to the existing code that does this already on width change events:

            if(!settings.noResizeEvent) {
                $(window).resize(function() {
                    // Only run the resize code if the viewport width has changed.
                    // we ignore the viewport height as it will be constantly changing.
                    if($(window).width() == viewportWidth) {
                        return;
                    };
                    viewportWidth = $(window).width();

                    clearTimeout(resizeThrottle);
                    resizeThrottle = setTimeout(resizeSlabs, settings.resizeThrottleTime);
                });

                 // Start of added code
                $(window).scroll(function () {
                    clearTimeout(resizeThrottle);
                    resizeThrottle = setTimeout(resizeSlabs, settings.resizeThrottleTime);
                });
                // End of added code

            };

Cheers!

Eric