CODEWITHSUNDEEP
jquery-mobile
daxeshS
daxeshS

Reputation: 17

jQuery mobile listviews lazy loading

How can i implement lazy loading in mobile jquery lisview widget? can anybody give a example using static data in json format binding to jquery mobile listview widget? Thank you.

Upvotes: 1

Views: 3624

Answers (1)

Tasos
Tasos

Reputation: 5361

There are a few ways, The following two ways work great

JQM way, a great tutorial. It detects when you scrolled to the bottom of the listview and loads more items to list

http://jqmtricks.wordpress.com/2014/07/15/infinite-scrolling/

Demo

http://jsfiddle.net/Palestinian/pAgbT/light/

Another way is to use Iscroll 5 plugging. Similarly you can setup a function to detect when you scrolled to the bottom of the list and load new items

http://iscrolljs.com/

Demo I placed the whole Iscroll 5 plugging in the demo so scroll down to //// JQM STUFF to see the actual code

Some of the JQM code e.g trigger create is depreciated in JQM 1.4 so some modifications are needed above > 1.4 for it work.

http://jsfiddle.net/t0t3Lz5x/

var myScroll;

 $(document).ready(function(){ 

        myScroll = new IScroll('#wrapper',
                        {
                            scrollX: false, 
                            scrollY: true
                            ,click:true // open click event
                            ,scrollbars: false 
                            ,useTransform: true
                            ,useTransition: false
                            ,probeType:3,
                            mouseWheel:true,
                            bindToWrapper: true
        });

});


 function initscroll() {

    setTimeout(function () {
            myScroll.refresh();
        }, 1000);
    }




        output = '<li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li>';
$('#listview').html(output).listview().listview('refresh');
 initscroll()   

myScroll.on('scrollEnd', function() {
if (this.y  == this.maxScrollY)

load_new_items();

});

function load_new_items() {

mysearchlist = $('<li><a>New Item</a></li><li><a>New Item</a></li><li><a>New Item</a></li><li><a>New Item</a></li>');
mysearchlist.appendTo("#listview").trigger('create'); 
$('#listview').listview().listview('refresh');
 initscroll()      

}

There is one more way using the Jquery's on scroll function to monitor the height of the list and then as you scroll measure the pixels you scrolled from the top of the list. When both match you can run a function to append more items in the list

Upvotes: 5

Related Questions