Sparkline渲染很慢并且挂起浏览器

Question

迷你图很适合做一些内联图.但是,如果它们所在的容器是隐藏的,则不能简单地在幕后绘制它们然后显示它们.您必须首先显示容器,然后调用该$.sparkline_display_visible方法.

这没关系,除非你有很多图表它真的很慢.我有200多个图形(并且最终将扩展到更多)以进行渲染,并且需要大约4000毫秒来渲染它们,挂起浏览器.有谁知道如何加速这个过程(可疑)或通过不挂起浏览器来提高感知性能？我试图添加一个计时器,因此每个图形在渲染时会一次显示一个,但是仍然需要一段时间才有200多个图形,这种效果会让用户分心.

谢谢

Answer 1

你可以让插件呈现加载时可见的图形,然后遍历隐藏的图形并让它以10个为一组进行渲染.将使浏览器不挂起并将"预渲染"在你需要之前隐藏的.

var sparklines = $('.inlinesparkline').sparkline();
var hidden = sparklines.parent().filter(':hidden').addClass('needsSparkline');

(function loopy(){
    var objs = hidden.filter(':lt(10)').removeClass('needsSparkline');
    hidden = hidden.filter('.needsSparkline');
    if (objs.length) {
        objs.css({
            'display':'',
            'visibility':'hidden'
        });
        $.sparkline_display_visible();
        objs.css({
            'display':'none',
            'visibility':''
        });
        hidden.length && setTimeout( loopy, 250 );
    }
})();