我正在使用 Phonegap/jQuery Mobile 创建一个应用程序。我在 jQuery mobile 中创建了一个 ListView。在那个页面中，我调用了一个包含一些图像 url 的 ajax。所以我想在所有图像下载完成后显示这些图像和其他参数。
"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>
工作示例：http: //jsfiddle.net/zghz4/
<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');
});
});
在这个例子中，listview 从一开始就被隐藏了。
Json 被转换为一个对象，每个循环都在通过它将新内容附加到列表视图。
在该函数之后，加载用于等待图像成功加载。当图像加载回调函数被触发时，列表视图被显示并且它的内容被增强了.listview('refresh')。