CODEWITHSUNDEEP
javascript
Brian
Brian

Reputation: 1

Javascript on Website Lags When Loading Websites in Other Tabs

I can't figure out why smooth scrolling lags when other websites are being loaded simultaneously in other tabs.

For instance, on http://www.feedrover.com/, if you click multiple article links, the site's smooth scroll will lag heavily while the other articles load. This shouldn't be happening, since the javascript for feedrover should be done?

Any ideas on how to fix this?

Upvotes: 0

Views: 59

Answers (1)

Gaël Barbin
Gaël Barbin

Reputation: 3919

A solution from MDN:

Since scroll events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications. Instead, it is recommended to throttle the event using requestAnimationFrame, setTimeout or customEvent, as follows:

(function() {
    var throttle = function(type, name, obj) {
        var obj = obj || window;
        var running = false;
        var func = function() {
            if (running) { return; }
            running = true;
            requestAnimationFrame(function() {
                obj.dispatchEvent(new CustomEvent(name));
                running = false;
            });
        };
        obj.addEventListener(type, func);
    };

    /* init - you can init any event */
    throttle ("scroll", "optimizedScroll");
})();

// handle event
window.addEventListener("optimizedScroll", function() {
    console.log("Resource conscious scroll callback!");
});

Upvotes: 1

Related Questions