问题:
系统首页展示数据过多,要展示:各种统计数据和图形共计12种,点击后,要等很久才能跳转到页面,反映太慢,体验效果不好。
分析:
首页展示的这12中统计数据,总共占电脑屏幕(分辨率1600 x 900)的7到8屏,实际上点击进入后,第一眼看到的数据只有第1屏的数据,共2种统计数据结果,其余数据虽然已经加载,但是并不会被立即看到。这是不是就浪费了呢?是不是可以在点击时加载第1屏数据,然后滚动鼠标时加载余下数据呢?
解决方式:
先加载少量数据,然后用Ajax来获取余下数据。
1.点击只加载第一屏数据,待进入展示页面后,用js监听滚动屏幕时通过Ajax请求加载数据:进入第2屏即加载第2屏显示数据,以此类推,直到加载完所有数据,再次滚动屏幕时不在加载数据。
结果:
这样做实际上是将一次性加载的等待时间分摊了。
优点:不需要等待太久,可以快速进入展示页;
缺点:滚动屏幕时需要请求数据,页面会有短暂的停顿感觉。