【工作记录0018】Hightcharts 设置加载中动画背景图，防止页面假死

使用ajax异步请求数据并显示到图标中，当每页显示图标数量或者数据列越多时，渲染越慢，等待时间更多，最终造成了页面的假死状态(页面在完成数据请求和渲染新图之前没什么动静)。为了防止假死状态，更为了更好的用户体验，hightcharts提供了加载中动画配置。

1.hightcharts默认不开启加载中动画效果，是需要显示调用指定函数，才能开启或者关闭加载中动画。

var res = $('#id').highcharts();//获取highcharts对象
res.showLoading();//开启加载中动画效果
//res.hideLoading();//隐藏加载中动画效果 

效果图如下：

2..hightcharts自定义加载中动画设置：

想要自定义加载中动画效果，主要运用了hightcharts的以下配置：

A.关于显示的加载中文字的全局配置：

//Highcharts 全局配置，可复制粘贴直接使用
Highcharts.setOptions({
    // 所有语言文字相关配置都设置在 lang 里
    lang: {
        loading: '数据载入中...'//设置载入动画的提示内容，默认为'Loading...'，若不想要文字提示，则直接赋值空字符串即可
    }
});

B.关于加载中动画效果的样式配置：

$('#id').highcharts({
                loading: {
                    style: {
                        position: 'absolute',//默认值
                        opacity: 0.5,//透明度
                        textAlign: 'center',//文字显示方式
                        //backgroundColor: 'gray',//背景色
                        backgroundImage: 'url("../Content/images/drip.gif")',//显示的背景动态gif图片，设置此项为gif图片即可实现常见的加载中动态效果图
                        backgroundSize: '100% 100%'//设置背景图片铺满Series数据列区域
                    }
                }
});

效果图：

这里是截图，所以看不到gif的动画效果，这里贴出gif原图链接：可爱喵喵