JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://lab.cubiq.org/iscroll/src/iscroll.js" type="text/javascript"></script>
<script src="https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js" type="text/javascript"></script>
<div id="scroller">
<div id="container">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean purus mauris, molestie ut varius vel, condimentum commodo lorem. Sed bibendum est non urna feugiat in auctor mi vestibulum. Maecenas fermentum semper ligula eu tincidunt. Vestibulum suscipit tincidunt massa vitae facilisis. Fusce volutpat sapien non orci tincidunt a laoreet arcu fermentum. Duis nunc turpis, euismod et varius ut, sodales vel felis. Donec in felis in ante congue fringilla. In diam ante, accumsan eu placerat eu, tincidunt id arcu. Vivamus feugiat iaculis nibh nec congue. Donec eget arcu ipsum. Nunc nunc est, tincidunt ac mattis nec, ullamcorper ut eros. Sed non justo ut velit hendrerit sollicitudin et sed urna. Proin faucibus, tellus a lobortis pharetra, odio velit bibendum quam, quis tempor lacus erat sed lacus. Mauris at sem lectus.</span>
<img class="lazy" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://img.ffffound.com/static-data/assets/6/10047346e1a2a37e4236dc11c11179bd4759a160_m.jpg" />
<img class="lazy" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://img.ffffound.com/static-data/assets/6/75584340197725ea8071e0b8c20e4fe089802bbe_m.jpg" />
<img class="lazy" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://img.ffffound.com/static-data/assets/6/d71909a8ea304f8c66532fa98af3ad17349f121a_m.jpg" />
<img class="lazy" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://img.ffffound.com/static-data/assets/6/c489b3eabd9b32bbb6b1f9937f6a8e028fb1de10_m.jpg" />
<img class="lazy" src="http://www.appelsiini.net/projects/lazyload/img/grey.gif"...
CSS
#scroller{width:350px;height:400px;background:orange;margin:10px;position:relative;}
#container{padding:30px 30px 30px 30px ;}
img{max-width:100%;}
JavaScript
function lazy() {
$('img.lazy:eq(0)').lazyload({
container: $('#scroller'),
threshold: 600
}).on('load', function() {
lazy();
$(this).removeClass();
setTimeout(function () {
myScroll.refresh();
}, 0);
});
}
function loaded() {
setTimeout(function() {
myScroll = new iScroll('scroller', {
bounce: false,
onScrollMove: function() {
lazy();
},
onScrollEnd: function() {
lazy();
}
});
}, 100);
}
loaded();
setTimeout(function() {
lazy();
}, 200);