콘텐츠가로드 될 때까지 jquery mobile/phonegap 앱이 대기하도록합니다.

jquery, jquery mobile, js, css & html을 사용하는 phonegap 앱이 있습니다.콘텐츠가로드 될 때까지 jquery mobile/phonegap 앱이 대기하도록합니다.

저는 listview를 사용하여 많은 LI를 보여주고 필터링합니다. 목록이 텍스트 일 때만 훌륭하게 작동합니다. 그러나 (내가 원하는대로) LI는 이미지로만 채워질 때 - 무작위로 숫자가로드되지 않고 일부 빈 LI가 남습니다.

(Chrome에서 내 PC를 테스트 할 때 제대로 작동합니다. 앱의 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 필터링 가능 목록 뷰를 새로 고칩니다.

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 mobile/phonegap 앱이 대기하도록합니다.

답변

관련 문제