I'm in an awkward situation right now and really confused about list performance.
I have this page: http://pastebin.com/98iCYAfQ (There is no template engine by the way. HTML is just an example to make you understand what kind of list I have.)
I populate hundreds of those LI elements (about 300) on the fly and put them into UL element at once. Data is in SQLite.
All these steps take 3-4 seconds on iPhone4 (max., usually it takes around 2-3) including fetching data, making list as a string, putting list into UL and initiate iScroll. But somehow it takes 5-6 seconds more to get it ready. I think it's because of rendering part or I'm really missing something here.
At last, after initiating iScroll:
setTimeout(function (){
document.getElementById('wrapper').style.left = '0'; // wrapper has '-9999px' by default.
loadingAnimation(false); // it shows up at the beginning, right before loading data from SQLite
}, 100);
Is there a callback to see how long it has taken to render my list?
Or anyone out there has faced same problem? I have found some examples about long list performance but none of them has iScroll but I don't think iScroll is the problem because it only takes about a second to initiate.
Here is a sample HTML from my project. My List page, which contains a list with dynamic content works fine. Once all dynamic content loaded, I call $('.selector').listview('refresh')
That makes scrollview to know the changes. I don't really know that but this is the only difference between functions which fill up these with content.
Anyway, news part also has dynamic content but there is no method to call listview when it's completed because it's not a list component. Is there any way to make scrollview to aware of changes? Or even is that the problem which I'm having?
The reason of I think that way is that the pages which scrollview doesn't work on have same content hierarchy.
"section.content article"
For example, I have another page which contains something like that:
<section data-role="content">
<form action="#" class="form-settings">
<fieldset>
<h2>Title</h2>
<div class="block>
That one works fine too but it also has no list. I'm really confused.
By the way, I didn't change scrollview.js and that means I still have:
Then, I tried to make a separated function (same function mostly but no binding) to call when news page loaded to see if it works but nothing changed. In none of these I have errors, so it's also really hard to figure out.
I have 2 pages in my application. One contains simple Login form and other contains custom design for TV Listings interface. I put my custom design in a page div but as you already know it makes my design fit to device's width.
My custom design's width is wide than device's width because of timeline part. Is it possible to enable a horizontal scroll? It would be perfect if it works with touch events.