0

我为列表视图创建了 10000 条虚拟记录，并在 2 组代码中测试了它的性能。

第一种方法。使用 push 方法，而不是追加到列表视图

function CreateList(result){
                var i = 0;
                var lstlist=[];
                for(i=0; i< result.length; i++)
                {                                   
                    lstlist.push("<li id='"+result[i].ID+"'><a><img src='"+result[i].Image+"'><h2>"+result[i].Name+" "+ result[i].ID+"</h2><p>"+result[i].Description+"</p></a>");  
                }   

                $("#lv").append(lstlist);
                $("#lv").listview("refresh");                
            }

第二种方法，直接追加到列表视图

function CreateList(result){
                var i = 0;
                var lstlist=[];
                for(i=0; i< result.length; i++)
                {                                   
                    $("#lv").append("<li id='"+result[i].ID+"'><a><img src='"+result[i].Image+"'><h2>"+result[i].Name+" "+ result[i].ID+"</h2><p>"+result[i].Description+"</p></a>");   
                }                       

                $("#lv").listview("refresh");                
            }

这两种方法似乎都表现不佳，有更好的方法吗？

4

1 回答 1

3

10000 条虚拟记录对于 jQuery Mobile 1.3 来说实在是太多了。即使在 100 多个元素之后，Listview 滚动性能也开始下降。jQuery Mobile 1.4 的表现要好得多，但你仍然会遇到 200-300 + listview 元素的问题。

更不用说，Kendo UI、PhoneJS 或 Sencha Touch 无法处理那么多的列表视图元素。

最好的做法是在列表视图中实现分页。

jQuery Mobile Listview 分页插件

Github 链接：https ://github.com/stakbit/jQuery-Mobile-Listview-Pagination-Plugin

官方支持：jQuery Mobile 1.3

演示http://listomatic.stakbit.com/

或者实现Pull-to-Refresh。你可以自己做，也可以使用：

iScrollView 插件

Github 链接：https ://github.com/watusi/jquery-mobile-iscrollview

官方支持：jQuery Mobile 1.3（它甚至适用于 1.4）

于 2013-10-30T13:57:28.447 回答