Cacher is the code snippet organizer for pro developers

function loadProducts () {
			$(window).bind('scroll', function(){
				if ( ($('#js-product-list').height() + 400) <= ($(window).height() + $(window).scrollTop())) {
					var nextContainer = $('#next-link'),
						next = $('#next-link a').attr('href'),
						container = $('#js-product-list'),
						innerContainer = $('.product-list-inner');
						if(next) {
							$('#js-processing-purchase').show();
							$.ajax({
								url: next + '&infinite=yes',
								type:'GET',
								success: function(data){
									if ( $('#next-link a').attr('href') && $('#next-link a').attr('href') !== $(data).find('#next-link a').attr('href') ){
										console.log('loading');
										$('.product-list-inner').append($(data).find('.product-list-inner').html());
										$('#next-link').html($(data).find('#next-link'));
									}
								}
							}).done( function() {
							$('#js-processing-purchase').hide();
							//cornerstoneUX.sharedFunctions.conformDisplay();
						}); 
					}
				}
			});
		}
		loadProducts();

Container = js-product-list
uses loading gif
add "next" link 

<div class="row">
	<!-- end filter-items-container -->
	<div id="js-product-list" class="row">
		<div class="product-list-inner">
		<mvt:foreach iterator="product" array="category_listing:products">
			<div class="column half small-one-third medium-one-fifth category-product">
				<div class="inner">
					<a href="/&mvte:product:code;.html" title="&mvte:product:name;">
						<div class="prod-img-wrap">
							<mvt:if expr="NOT ISNULL l.settings:product:imagetypes:main">
								<img src="&mvte:product:imagetypes:main;" alt="&mvte:product:name;" title="&mvte:product:name;" />
							<mvt:else>
								<img src="../images/img_no_thumb.jpg" alt="&mvte:product:name;" title="&mvte:product:name;" />
							</mvt:if>
						</div>
						<p class="prod-name">&mvte:product:name;</p>
						<mvt:if expr="l.settings:product:price GT 0">
							<p class="prod-price semibold">&mvte:product:formatted_price;</p>
						</mvt:if>
					</a>
				</div>
			</div>
		</mvt:foreach>
	</div>
	<div class="hide" id="next-link"><mvt:if expr="l.settings:category_listing:page_links:current_page NE l.settings:category_listing:page_links:last_page"><a href="&mvte:category_listing:page_links:next_link;">next</a></mvt:if></div>
	<div id="js-processing-purchase" class="processing-purchase align-center prod-page-loading"><img src="../images/img_ajax_processing.gif" alt="Processing..." title="Processing..." /></div>
	</div>