jqueryモバイル/ phonegapアプリにコンテンツがロードされるまで待つように指示します

jquery、jquery mobile、js、css & htmlを使用してphonegapアプリケーションを取得しました。jqueryモバイル/ phonegapアプリにコンテンツがロードされるまで待つように指示します

私はリストビューを使用して多くのLIを表示してフィルタリングします。リストがテキストだけであるとき、彼らは素晴らしい仕事をします。しかし、（私が望むように）LIには画像だけが埋め込まれています - それらの乱数は読み込まれず、いくつかの空白のLIが残っています。

（Chromeで自分のパソコンでテストするとうまくいきますが、これは一度utのphonegap'dに失敗し、アプリとして電話で実行されているだけです）。

無駄なコードを数百行追加してインデックスページを遅くすると、画像がすべて表示されます。

私は問題は、ページが読み込まれ、画像がすべて読み込まれる前に終了することだと思います。

すべての画像が準備完了するまで、アプリケーションに読み込まないように指示する方法はありますか？

編集：私が使用しているコード：

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

のように。多くの画像があり、その数は時間の経過とともに大きくなるだけです。

出典

2017-09-12 Graeme Hay

[window.onload（）]（https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload）の使用を検討しましたか？このメソッドは、イメージがロードされるのを待ちます。 –

jqueryまたはjsの周りに私の道がまだよく分かりません。私は今、時間を詰めて、さまざまなwindow.onload（）の変化を見て、運を無駄にしています。私はそれを使ってどの機能をトリガーすべきか分かりません。イメージがロードされるまでページの表示が遅れるようなものを探したり、すべてのリストビューでリフレッシュをトリガーしたりするべきでしょうか？私はそれをトリガするために何を使用すべきですか？ –

イメージをロードするときには、イメージを含む<li>を<ul>に追加する必要があります。画像のコールバックimg.onloadの中に<li>を追加し、JQM Filterable 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を使用している場合は、その画像の到着順に注意してください画像リスト配列で定義されているのと同じ順序であることが保証されません。これは、各画像の大きさとネットワークトラフィックの大きさによって異なります。したがって、リスト項目を特定の方法でグループ化する必要がある場合は、各画像がロードされるときにリスト要素を並べ替えるためのコードがさらに必要になります。すべてのイメージが既にダウンロードされ、ブラウザによってキャッシュされている場合、配列の順序は（おそらく）維持されます。

出典

2017-09-12 23:04:12 deblocker

提案していただきありがとうございます。私はjqueryやjsの周りに自分のやり方をまだ分かっていません。img.onloadをどのコンテキストで使用するかを知るにはまだ十分です。私はこれを今研究していますが、私のコードの一部を元の質問に編集して、 :) –

jqueryモバイル/ phonegapアプリにコンテンツがロードされるまで待つように指示します

答えて

関連する問題