一览数据异步加载的解决方案

需求是这样的：

页面中需要显示多个数据块（格式什么的都是一样的，里面有文字有图片，有表格神马的），数据量大概几百，然后要求显示这些数据块时画面不能卡死，还可以正常操作（按钮点击，画面迁移神马的）。

思路：

很明显，直接将这几百条数据显示到画面必然会导致画面卡死，没准就直接让IE挂掉了。

所以就是要异步加载了，但是异步加载会有个问题，就是不能保证数据块的顺序。

逐条地异步请求时，请求速度有快有慢（受网速，单条数据块包含的数据量等影响），上一条数据取回之前，下一条数据就有可能已经被取出并显示到画面了，这样后面的数据就占据了上一条数据的位置，显示的顺序就被打乱了。

这个问题研究了好久，想着能不能先让各自数据占好自己的位置，然后在自己的位置上各自请求数据。

最后的解决办法是：

1.先要知道总共要显示的数据量，比如200条。

2.将数据分组，我选择的是5条数据一组，会有40组。

3.为这40组数据在画面上各自分配位置，也就是在画面画好40个div（顺序固定，不给定高度，也就是此时画面上看不到这些占位），给定排好顺序的id

4.循环异步请求加载数据，加载数据时按照上一步排好顺序的id寻找自己的占位div

 

也想过使用下拉时加载，这种做法是目前大部分图片/商品浏览网站的常用做法，但是由于种种不能说的原因（客户不接受啦），只能放弃。

目前这种方式性能算是还不错，业务上也不会有问题。

但是也有缺点：

1.代码量不小，逻辑也不容易理解，后面接手维护项目的小伙伴估计会很郁闷

2.经常会先显示后面的数据，然后前面数据才加载出来，这时会看到前面的数据突然蹦出来......个人觉得有点别扭

 

如果有更好的解决方案欢迎交流啊，以后找到更好的更简洁优雅的解决方案的话，我会再贴出来。

转载于:https://www.cnblogs.com/qqxy/p/5435399.html