jQuery Forum

Don't need it for a project today but sounds useful!!

---
http://zsprawl.com

same here. You can store a lot of stuff in listview, so any lazyloading function is always welcome!

+1

+1

This is still very much a work in progress, feedback and suggestions are welcome.

Just curious:

In your script you are requiring the JSON response to inlcude "ready-made" HTML. I'm sitting on a somewhat similar issue pondering on whether to return "raw data" or "ready-made" HTML from a search query (using Coldfusion server-side).

I do actually prefer returning ready-made HTML, because on mobile devices I would not want to Ajax-in another template to mock-up the search results in my success handler.

Do you agree?

(need some justification for supposedly despicable HTML-generation inside a Coldfusion CFCs.. :-)

At one point, I was returning the raw data and building the HTML in the widget, but then I figured that the server could build the HTML for the list items faster than the client.  And, the response should be gzipped anyway, so size isn't an issue.  I could also probably update a few things and make it so it doesn't necessarily have to be a listview that's being lazyloaded, in which case, I would also have to require the HTML snippet to be built on the server.  

Ok. Cool, so I will be trying out your lazyloader shortly. Curious to see if I can get it to work. Thanks!

Well, the widget would have more flexibility if there were some ability to use straight JSON data, because you could consume third-party APIs. In that case, I would recommend using some templating system. icanhas.js looks good to me - it builds on top of mustache templates.

But (when you control the server) I also prefer serving ready-made HTML when updating a page with AJAX. It keeps all your templates in one place (on the server). You can use the template you probably already have to produce a list item.

Haven't really read the code, so I puzzled a bit about the combination of JSON and ready-made HTML. I think I probably would have just served HTML period. But I suppose parsing the JSON is (at least marginally) faster than parsing the HMTL. (I assume the lazy-loader has some need to deal with each list item individually? If that is so, then if the server just returned a list fragment, then you'd at least have to do an .each() on the returned fragment to step through the items.

@watusiware:  You've mentioned icanhas.js a few times in the past, but I still haven't looked at it.  It does sound interesting though.  

I had read somewhere on SO today that serving back pure HTML is not possible from different servers, while serving HTML "encapsulated" in JSON would allow to do this. Now where was that link...

Last night, I added support for raw JSON in the response so now it's up to the developer.  I settled on using json2html since it's a pretty simple way to separate the response data from presentation of the response data.  I may also eventually add support for other JSON templating engines if there is demand for others (such as icanhaz).       

Hi. I realise I am a bit late to this thread but I'm coming cap in hand to ask for some help.

I have a jquery app that I have made for my work (social housing) that has an embedded listview of 200+ entries. Each entry contains the phone number and email address of every employee at the company. It's basically a contacts app.

The problem I have is that the listview takes about 20-30 seconds to load. This is where your lazyload widget comes in. I have downloaded the widget and looked at your instructions but the problem is I am only just starting out and this is a bit above my head. I have no idea how to properly implement it.

All I need it to do is lazyload a page's worth of contacts. I should also mention that I have a search filter on the list.

Any help would be VERY much appreciated :)

Thanks.

@jomoapps - First of all, a listview of just 200-300 entries should not take 20-30 seconds to load.  So, you might want to optimize that first.  My first question would be, have you looked at the Net console of Firebug to see what is being loaded and how long each image/css/js file is taking to load?  And, how long is the actual server-side script taking to return the list of contacts as HTML?  I'm wondering if your contacts each have an image, and if so, is the image a full sized image or has it been optimized as a thumbnail?  

Hi dcarrith.

Sorry for the late reply. Been a hectic week at work! In response to the points you raised, my app is a native mobile app built using jquery mobile and phonegap. As far as I can tell firebug wont be able to assist me in debugging this type of app. Am I right? I currently have the app deployed on Android. I'm pretty sure its the listview that takes the time to load the app however as I tried some manual debugging and when I manually reduced the list to about 10-15 entries, the whole thing worked much much quicker.

There are no images in the listview at all. The only images the app loads are a splashscreen, background.png, and the jquery mobile standard button/listview images.

I have no server side code. The whole app is self contained. My listview is entirely in the index.html file contained withing the .apk. Is this a problem? I can't really provide code samples of how I've tried to implement your widget as the whole thing was so far above my head. I think maybe because the widget expects there to be server side code.

Tell me to get lost if this is too much hassle. Just wondered if there was any way you could help. A quick fix as my listview is self contained?

Thanks in advance.