我有一个使用 jquery、jquery mobile、js、css 和 html 的 phonegap 应用程序。
我使用 ListView 来显示和过滤很多 LI。当列表只有文本时，它们工作得很好。但是当(如我所愿)LI 仅填充图像时 - 随机数量的图像无法加载，只留下一些空白 LI。
(在我的电脑上用 Chrome 测试时它工作正常。只有当 ut 的 phonegap 并作为应用程序在手机上运行时它才会失败)。
如果我通过添加几百行无用代码来减慢索引页面的速度 - 那么所有图像都会显示。
所以我认为问题在于页面加载并在图像全部加载之前完成。
有没有办法告诉应用程序在所有图像都准备好之前不要加载？
编辑:我正在使用的代码:
<div data-role="content">
<ul data-role="listview" data-icon="false" data-filter="true" data-filter-placeholder="Search all cards..." data-inset="true">
<li data-role="list-divider">List of things</li>
<li data-filtertext="various:different:keywords"><div><img src="img/01046.jpg" class="cardimg"></div></li>
<li data-filtertext="various:different:keywords"><div><img src="img/01047.jpg" class="cardimg"></div></li>
<li data-filtertext="various:different:keywords"><div><img src="img/01048.jpg" class="cardimg"></div></li>
...
等等。图片很多，而且数量只会随着时间的推移而变大。
最佳答案
您应该添加 <li>将图像包含到您的 <ul>当加载每个图像时。图片回调里面img.onload添加<li>并刷新您的 JQM 可过滤 ListView 。
这是一个例子:
var imagesList = [
{searchWords: "Lewis HAMILTON", src: "https://via.placeholder.com/2323x2323"},
{searchWords: "Sebastian VETTEL", src: "https://via.placeholder.com/1212x1212"},
{searchWords: "Kimi RAIKKONEN", src: "https://via.placeholder.com/2333x2333"},
{searchWords: "Felipe MASSA", src: "https://via.placeholder.com/2000x2000"},
{searchWords: "Valtteri BOTTAS", src: "https://via.placeholder.com/1111x1111"},
{searchWords: "Daniel RICCIARDO", src: "https://via.placeholder.com/666x666"},
{searchWords: "Nicolas HULKENBERG", src: "https://via.placeholder.com/2222x2222"}
], remaining;
function addToList() {
remaining--;
var head = $("#page-images-list .ui-header h1");
var msg = (remaining === 0) ? "All images loaded." : "Remaining: " + remaining;
$(head).html(msg);
var html = '<li data-filtertext="'+this.searchWords+'">';
html += '<a href="#">';
html += '<img src="'+this.src+'">';
html += '<h2>'+this.searchWords+'</h2>';
html += '<p>'+this.src+'</p></a>';
html += '</li>';
$("#listview-images").append(html);
//$("#listview-images").listview("refresh");
$("#listview-images").filterable("refresh");
}
function loadImages(dest, list) {
$(dest).empty();
remaining = list.length;
$.each(list, function(index, item) {
var img = new Image();
img.searchWords = item.searchWords;
img.onload = addToList;
setTimeout(function() {
img.src = item.src;
}, 0);
});
}
$(document).on("vclick", "#btn-reload", function(e) {
loadImages("#listview-images", imagesList);
});
$(document).on("pagecontainershow", function(e, ui) {
if (typeof ui.toPage == "object") {
switch (ui.toPage.prop("id")) {
case "page-images-list":
loadImages("#listview-images", imagesList);
break;
}
}
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div id="page-images-list" data-role="page">
<div data-role="header" data-position="fixed">
<a href="#" id="btn-reload" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-refresh">Reload</a>
<h1>Images callback</h1>
</div>
<div role="main" class="ui-content">
<ul data-role="listview" data-inset="true" data-filter="true" id="listview-images">
</ul>
</div>
</div>
</body>
</html>补充说明:
如果您使用的是 list divider要对您的列表内容进行分组，请注意图像到达顺序不能保证与图像列表数组中定义的顺序相同。这取决于每个图像的大小和网络流量。因此，如果您还需要以某种方式对列表项进行分组，您将需要一些额外的代码来在加载每个图像时再次对列表元素进行排序。如果所有图像都已经下载并被浏览器缓存，那么数组顺序将(可能)保持不变。
关于javascript - 告诉 jquery mobile/phonegap 应用程序等待内容加载完成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46172499/