性能：应用列出多张图片的最佳实践

Question

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

这是一个目前有 264 项的列表，并且还在增加。对于平板设备，图片的高度必须至少为 250 像素。

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

谢谢

Answer 1

最好将图像与应用程序一起发送，因为图像不必从服务器请求，因此加载速度更快。从服务器加载项目会给你更多的自由，因为你不必重新部署你的应用程序来添加项目。

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

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

您可以使用 http://www.jscroll.com or http://dcarrith.github.io/jquery.mobile.lazyloader/ 之类的东西来实现。

希望对您有所帮助

Answer 2

使用 Universal Image Loader in conjunction with a dynamically loading list like this 之类的东西应该就是您要找的东西。

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

Answer 3

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

它允许在 DOM 中限制数量的元素，这样页面性能就不会降低。检查这个 fiddle , 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();
}

性能：应用列出多张图片的最佳实践

Performance: best practices for an app listing several images

android

jquery-mobile

cordova