jQuery Mobile LazyLoad

jQuery Mobile LazyLoad - LazyLoad/Infinite Scrolling plugin for jQuery Mobile listviews, uses Ajax for pulling in more records

Usage

Include the following file:

<script type="text/javascript" src="js/jquery-mobile-lazyload.js"></script>

Your listview will consist of 2 parts... the <ul> tag, and an include file (getdata.cfm) that generates the <li> elements List file:

<ul data-role="listview" id="dataList" class="lazyload">
  <cfinclude template="getdata.cfm" />
</ul>

Include file (getdata.cfm):

<cfsetting showdebugoutput="false">

<cfparam name="url.startrow" default="1">
<cfparam name="url.maxrows" default="20">

<cfset variables.results = objMobile.GetDataList(parameters)>

<cfset variables.inc = url.startrow + 1>
<cfoutput query="variables.results" startrow="#url.startrow#" maxrows="#url.maxrows#">
	<li data-inc="#variables.inc#">
		<a href="details.cfm?#variables.results.dataid#">
			#variables.results.display#
		</a>
	</li>

	<cfset variables.inc++>
</cfoutput>

Then add this to initiate the LazyLoad:

$(function(){
  $('.lazyload').lazyLoad('getdata.cfm');
});

Demo

License

Copyright (c) 2013 Don Walter. Licensed under the MIT license.