jQuery Forum

- Unclear if the above code is the code that is objectionably slow, or some other code you haven't shown us.

That's not easy to do right, and if that is what you want, I would look for a plugin. 

There is this one, but it only works with a very old version of jQuery Mobile:

    http://dcarrith.github.io/jquery.mobile.lazyloader/

But I'm guessing that's not what you mean by "lazy load", because I see you are using data-filter, and so you need to have all of the items for the filter to work. It wouldn't make sense to only load more items once the user scrolls.

- Next, determine the cause(s) of the delay. Is it because your website takes some time to respond, or because it takes a long time to display the data once the browser has it? Use your browser's inspection tools to see the timeline.

- How many items in a list? listview is not a good choice for long lists. You will get much better performance with some plain HTML and CSS, especially if there are links in the list.

- I see a suspicious bit of code above. At line 36 you empty #posts. It looks to me that for every post, you empty #posts, and populate it. The user will only see the last one, and you will have needlessly emptied and re-populated the element for each item. The user will never see more than one item in the list.

- If you intend on fetching each item separately from your server, realize that while the user may see results sooner, overall it will take even longer (MUCH longer) to populate the list.

- Don't use inline onclick! It is not 1995! It bloats your page size unnecessarily. Just write a click delegation in JS.

- Remove the data-prefetch. I don't know if it might cause any trouble, but in any case it is meaningless. You are telling it to "prefetch" a page that is already "fetched". data-prefetch is for when you use single-page documents.

First I want the first Page to be as Categories List

When I open any of these categories it will jump to another dynamic page which includes the posts of this category.

And third page is for the content of each post.

When I click any of the category, the posts page appears with just header and footer after 5 seconds posts list appears. What I want is like loading dialog till the all page created. 

using $(#posts).empty() because when i click the first category the posts appears for category-1 then when I go back and click  category-2 it appears both posts for category-1 and category-2 and so on if clicked category-3 it appears posts for 1, 2 and 3, its like endless!! 

so i made this solution to refresh the listview and clear it.

if you find my solution is wrong please advice me. 

Thanks again.

Browsers all have inspection tools. You may need to enable an option to show the menu choice for the inspection tools. Every desktop browser has this, and there will be some tab where you can see network timing, drawing timing, etc. Use it. How much time does it take to fetch the data from your server?

So, if it takes 2 second to get from the server, for example, that means it takes 3 seconds more to create the page.

2. You didn't say how many items you will typically have in your list. Large lists are unreasonable on mobile devices. 100 items is a large list. I try to keep it under 50.

3. Look at your code, line 36. Line 35 you loop through each data[posts] . For each one, you empty #posts, and then populate it. Then for the next one, you empty and populate again. You are needlessly emptying and re-populating. I don't know what your data looks like. Maybe it is just a list of one.

It's like writing a note on a piece of paper, erasing it, and writing a new note. Then doing it 10 or 100 times. The reader will only see the last note. Why do this?

I think you want to move the empty to BEFORE the $each()

Thanks Again,

 Here is the network performance attached.

For now im using just 5 items now for testing and it takes this long! And we planning to put more than 50 items in future.

Regarding the empty() code as I told you that because when i click category-1 it gave me the posts and when i click category-2 i get posts of category-1 AND category-2. 

If my solution is wrong, How can i fix this issue!

Thanks,

Nothing you do with jQuery Mobile will fix that.

Changing from one round-trip to several will only make that problem worse.

ping your server. What is the ping time? What kind of Internet connection do you have? Are you using a mobile connection on a phone or tablet, etc?

I get 100mSec ping to your server.

Are you/your customers in Libya and/or nearby?

Your server is on the wrong continent. You will need to research the best place.

I would not recommend using dynamic techniques like this, and certainly not to break it up into multiple requests, because your customers don't seem likely to have great Internet connections with low latency, even if you move your server.

You should aim to deliver content of minimal size, with as few round-trips as possible.

is there a way to put loading dialog till the list items complete and page created!