jQuery mobile scrolling does not work on first page display

Question

I'm using the following:

cordova 6.3.1 jQuery 1.11.1 jQuery UI 1.11.2 jQuery Mobile 1.4.5 iScroll 4.2 jQuery Mobile iScrollview v1.3.7

When my li element only contains anchor elements, everything works fine. I get a scrollbar and am able to scroll to the bottom of the list.

When my li element contains a mix of img elements and anchor elements (not every anchor has an image associated with it) I do get a scrollbar but I cannot scroll to the bottom of the list - but ONLY the first time the page is displayed.

If I navigate away from the page and come back, everything works fine.

When my li element contains an equal number of img and anchor elements, at first I don't get a scrollbar and scrolling doesn't work at all - but ONLY the first time the page is displayed.

If I navigate away and come back, everything works fine.

I suspect its having trouble calculating the size of the img element but am not sure how to fix it.

Here's the code to build the list items and append them to a string:

htmlToAppend = "<li>" +
           "<img id="+ i + " src=\""+imageUrl+"\" ></img><br>" +
           "<a id=" + i + " " + cssColor + ">" + caption + '<br><br><br><br><br></a>" +
       "</li>";

Each htmlToAppend string gets concatenated to the great big string I append:

contentForDisplay.concat(htmlToAppend);

Here's the standard iscroll/iscrollview stuff I have to do:

$('#unorderedlist').append(contentForDisplay);    
$('#some_div').trigger('create');
$("#scrollable_list").iscrollview("refresh");

I suspect the problem is my code does not know how to calculate the image size until the 2nd time I display the list.

Or maybe I'm all wrong.

Either way, have you faced anything like this? If so, what did you do to solve it? If you were me, what would you try next?

I see there's an iScroll5 - is it any easier to use?

Are there other cordova+jQuery scrolling solutions out there?

Answer 1

When you write a Cordova app, the most important thing is, that you write proper html and css. Proper means, that you have a clean and simple html structure and not a div desert.

eg: Delete your br-tags and use margin or padding.

jQuery and jQueryMobile are good libraries, but if you use them wrong it is the best way to slow down your app. I use them a lot, but only for things, which I can't write simpler by myself.

I would throw out iScroll and jQueryMobile and would start again with your list. I have lists with hundreds of entries and they are scrolling very smooth.