Question

我正在使用JQuery Mobile和Phonegap Build开发应用程序。还有一个包含图像的列表。此列表填充了dynamiccaly。但是我没有在这个列表中使用JQM标记，因为它会更慢。

这是一个包含264项目的列表，现在正在增加。平板电脑设备的图像高度必须至少为250px。

目前所有这些图片都附带应用程序。我应该决定从服务器加载图像吗？如果是，滚动列表会更慢吗？

由于

Answer 1

最好使用应用程序发送图像，因为不必从服务器请求图像，因此加载速度更快。从服务器加载项目可以让您更自由，因为您不必重新部署应用程序来添加项目。

为了获得更好的性能，您最好的解决方案是按需加载图像。换句话说，一旦用户向下滚动到最后一个图像加载下一组图像，一次只加载x个图像。

因此，您的方案中的最佳做法是在用户滚动时按需加载图像（延迟加载）图像。

您可以使用http://www.jscroll.com或http://dcarrith.github.io/jquery.mobile.lazyloader/之类的内容来实现此目标。

希望有所帮助

Answer 2

使用Universal Image Loader之类的内容以及this这样的动态加载列表应该是您正在寻找的内容。

无论是从本地数据加载还是从服务器加载，我建议将图像存储在外部数据库中，因为使用它可以做的限制要少得多。

Answer 3

为了平滑滚动，您可以尝试http://airbnb.github.io/infinity/，这与图片或列表项目的数量无关。

它允许DOM中有限数量的元素，因此页面性能不会降低。检查这个小提琴，http://jsfiddle.net/Luq16one/4/。

var $el = $('#my-infinite-container');
var listView = new infinity.ListView($el);

// ... When adding new content:

var $newContent = $('<p>Hello World</p>');
listView.append($newContent);

// ... To remove items from a list:

var listItems = listView.find('.my-items');
for(var index = 0, length = listItems.length; index < length; index++) {      
    listItems[index].remove();
}

效果：列出多张图片的应用的最佳做法

3 个答案: