告诉jquery mobile / phonegap应用程序等待直到加载内容

Question

我有一个使用jquery，jquery mobile，js，css和html的phonegap应用程序。

我使用listview来显示和过滤很多LI。 当列表仅是文本时，它们的效果很好。 但是，当（按我的意愿）仅在LI中仅装满图像时-随机数的图像无法加载，仅留下了一些空白的LI。

（在Chrome浏览器中在我的PC上进行测试时，它可以正常工作。只有在ut的电话间隔打开并作为应用程序在手机上运行后，它才会失败）。

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

因此，我认为问题在于页面在图像全部加载之前加载并完成。

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

编辑：我正在使用的代码：

<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可过滤列表视图。

这是一个例子：

 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对列表内容进行分组，请注意，图像到达顺序将不保证与图像列表数组中定义的顺序相同。 这取决于每个映像的大小以及网络流量。 因此，如果您还需要以某种方式对列表项进行分组，则需要一些其他代码来在加载每个图像时再次对列表元素进行排序。 如果所有图像均已下载并已由浏览器缓存，则将（可能）保持阵列顺序。