Question

我使用jquery，jquery mobile，js，css＆amp; amp; HTML

我使用listview来显示和过滤很多LI。当列表只是文本时，它们的效果很好。但是当（正如我想要的）LI只是用图像填充时 - 随机数量的它们无法加载，只留下一些空白的LI。

（在Chrome浏览器中使用我的电脑进行测试时效果很好。只有在手机上播放并通过手机作为应用程序运行时才会失败。

如果我通过添加几百行无用的代码来减慢索引页面的速度 - 那么所有图像都会显示出来。

所以我认为问题是页面加载并在图像全部加载之前完成。

有没有办法告诉应用程序在所有图像准备好之前不要加载？

编辑：我使用的代码：

<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>
...

等等。有很多图像，而且随着时间的推移，这个数字会越来越大。

Answer 1

在加载每张图片时，您应该将包含图片的<li>添加到<ul>。在图片回调img.onload内添加<li>并刷新您的JQM可过滤列表视图。

以下是一个例子：

＆＃13;

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;
    }
  }
});

＆＃13;

<!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>

＆＃13;

附加说明：

如果您使用list divider对列表内容进行分组，请注意图像到达顺序不能保证与图像列表数组中定义的顺序相同。这取决于每个图像的大小和网络流量。因此，如果您还需要以某种方式对列表项进行分组，则在加载每个图像时，还需要一些额外的代码来再次对列表元素进行排序。如果所有图像都已下载并由浏览器缓存，则（可能）维护阵列顺序。

告诉jquery mobile / phonegap应用等待内容加载

1 个答案: