Dynamic loading

When you create BttrLazyLoading images on the fly.

JavaScript

var load = function() {
	for (var i = 0; i < 32; i++){
		var $img = $('<img class="bttrlazyloading" />');
		$('#loading-area').append($img);
		$img.bttrlazyloading({
			// your container CSS selector
			container: '#loading-area',
			xs: {
				src: 'img/800x300.jpg',
				width: 800,
				height: 300
			},
			sm: {
				src: 'img/380x380.jpg',
				width: 380,
				height: 380
			},
			md: {
				src: 'img/350x350.jpg',
				width: 350,
				height: 350
			},
			lg: {
				src: 'img/300x300.jpg',
				width: 300,
				height: 300
			}
		});
	}
}
// On the load more button click we load 32 more images
$('#load-more').click(function(e) {
	load();
});
// Initial load
load();