0 Replies Latest reply on Sep 13, 2017 2:00 AM by graemeh10877331

    Phonegap loads before my listview images

    graemeh10877331

      I've got a phonegap app using jquery, jquery mobile, js, css & html.

      I'm still learning my way around anything more complex than html and css, so please talk me through anyting I've messed up!

      I use listview to show and filter a lot of LI's. When the lists are text only they work great. But when (as I want) the LI's are solely populated with images - a random number of them fail to load, leaving just some blank LI's.

      When testing on my pc in Chrome it works fine. It only fails once it's phonegap'd and running on a phone as an app. (Galaxy s8 - Android).

      If I slow the index page by adding a few hundred lines of useless code - then the images all display.

      So I think the problem is that the page loads and finalises before the images have all loaded.

      Is there any way to tell the app not to load until all the images are ready?

      I have listviews on multiple div's acting as pages within index.html of the app, and call them from external html files using:

       

      $("div[id^=menu]").each(function() {

          var match = this.id.match(/\w+$/)[0];

          $(this).load('menus/' + match + '.html');

      });

       

      <div data-role="content"> <ul data-role="listview" data-icon="false" data-filter="true" data-filter-placeholder="Search all cards..." data-inset="true" class="search">  
      <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>
      ...

      and so on. There are a lot of images, and the number is only going to get bigger over time.

      I've tried playing around with window.onload, and with a widget called imagesLoaded, but either I'm getting somethign wrong, or they don't work for this.

      Why does phonegap stop loading the page before images are loaded? And what is it that I need to prompt to get it to either wait, or to refresh (something? listview?) once they're loaded?

       

      I've spent two days tearing my hair out on this. Can anyone help?