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

我正在使用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>

您可以使用jquery延迟加载插件

检查这里的插件

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

工作示例：

HTML:

Javascript:

$（document）.on（'pageinit'，'#index'，function（）{
var obj=jQuery.parseJSON（“{”数据“：[{”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（对象数据、函数（索引、值）{
$（'[data role=“listview”]'）。追加（'
'+value.string_id+'
'）；
});
$（'[data role=“listview”]li img'）。加载（函数（）{
$（'[data role=“listview”]'）.show（）.listview（'refresh'）；
});  
});

在本例中，listview从一开始就被隐藏

Json被转换为一个对象，每个循环都会通过它向listview添加新内容

之后，使用函数load等待图像成功加载。加载图像时，会触发回调函数，显示listview，并使用

增强其内容。listview（“刷新”）

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

</ul>

$(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');
    });  
});