<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    
    <title>BttrLazyLoading Sandbox issues</title>

    <link href="https://rawgit.com/shprink/BttrLazyLoading/v1.0.8/dist/bttrlazyloading.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="https://rawgit.com/shprink/BttrLazyLoading/v1.0.8/dist/jquery.bttrlazyloading.js"></script>
  </head>

  <body>
    <div class="row" id="loading-area"></div>
    <button id="load-more" class="btn btn-lg btn-block btn-primary">Load more images</button>
  </body>
</html>
#loading-area{
		height: 550px;
		overflow: auto;
	}

$(function() {
	var load = function() {
		for (var i = 0; i < 32; i++)
		{
			var $wrapper = $('<div class=" col-sm-6 col-md-4 col-lg-3">');
			var $img = $('<img class="bttrlazyloading">');
			$wrapper.append($img);
			$('#loading-area').append($wrapper);
			$img.bttrlazyloading({
				container: '#loading-area',
				delay: 1000,
				xs: {
					src: 'http://bttrlazyloading.julienrenaux.fr/demo/img/800x300.jpg',
					width: 800,
					height: 300
				},
				sm: {
					src: 'http://bttrlazyloading.julienrenaux.fr/demo/img/380x380.jpg',
					width: 380,
					height: 380
				},
				md: {
					src: 'http://bttrlazyloading.julienrenaux.fr/demo/img/350x350.jpg',
					width: 350,
					height: 350
				},
				lg: {
					src: 'http://bttrlazyloading.julienrenaux.fr/demo/img/300x300.jpg',
					width: 300,
					height: 300
				}
			});
		}
	}
	$('#load-more').click(function(e) {
		load();
	});
	// Initial load
	load();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.