如何在jQuery Mobile中完全下载后在Listview中显示图像

Question

我正在使用Phonegap/jQuery Mobile创建一个应用程序。我在jQuery mobile中创建了一个ListView。在那个页面中，我调用了一个ajax，其中包含一些图像url。所以我想在所有图像下载完成后显示这些图像和其他参数。

"data":[
{
"id":"48",
"string_id":"Hello world",
"imgurl":"http://sample.com/hello.jpg"
}, 
{
"id":"58",
"string_id":"Hello world",
"imgurl":"http://sample.com/world.jpg"
}
]

这是列表视图代码。

<ul data-role="listview"></ul>

Answer 1

工作示例：http://jsfiddle.net/zghz4/

HTML:

<ul data-role="listview" style="display: none;">
</ul>

Javascript：

$(document).on('pageinit', '#index', function(){ 
    var obj = jQuery.parseJSON('{"data":[{"id":"48","string_id":"Hello world","imgurl":"https://si0.twimg.com/profile_images/3629297899/da2519b27b5b82454d67a3ff42b8c109.png"}, {"id":"58","string_id":"Hello world","imgurl":"https://si0.twimg.com/profile_images/3629297899/da2519b27b5b82454d67a3ff42b8c109.png"}]}');
    $.each(obj.data, function(index, value) {
        $('[data-role="listview"]').append('<li><img src="' + value.imgurl + '"><h2>' + value.string_id + '</h2></a></li>');
    });
    $('[data-role="listview"] li img').load(function(){
        $('[data-role="listview"]').show().listview('refresh');
    });  
});

在本例中，列表视图从一开始就被隐藏。

Json被转换为一个对象，每个循环都会将新内容附加到listview中。

之后，函数加载用于等待图像成功加载。当加载图像时，会触发回调功能，显示列表视图，并使用.listview('refresh')增强其内容。

Answer 2

您可以使用jquery懒惰加载插件。

查看此处的插件http://www.appelsiini.net/projects/lazyload

您可以浏览代码并观看列出的演示。