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">
<img src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://img.ffffound.com/static-data/assets/6/10047346e1a2a37e4236dc11c11179bd4759a160_m.jpg" />
<img src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://img.ffffound.com/static-data/assets/6/75584340197725ea8071e0b8c20e4fe089802bbe_m.jpg" />
<img src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://img.ffffound.com/static-data/assets/6/d71909a8ea304f8c66532fa98af3ad17349f121a_m.jpg" />
<img src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://img.ffffound.com/static-data/assets/6/c489b3eabd9b32bbb6b1f9937f6a8e028fb1de10_m.jpg" />
<img src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://img.ffffound.com/static-data/assets/6/be223b5c7a71b011873da44698b18f72d4fca6cf_m.jpg" />
<img src="http://www.appelsiini.net/projects/lazyload/img/grey.gif" data-original="http://img.ffffound.com/static-data/assets/6/a49e0e82cad4f2d670f9502ce0b3fe426a9759d3_m.jpg" />
</div>
</div>
<div id="text"></div>
CSS
#scroller{width:350px;height:350px;background:orange;margin:10px;position:relative;}
#container{padding:30px;}
img{max-width:100%;}
JavaScript
function loaded() {
setTimeout(function() {
myScroll = new iScroll('scroller', {
onScrollMove: function() {
$('img').lazyload({
container: $('#scroller'),
threshold:100
}).on('load', function() {
myScroll.refresh();
});
}
});
}, 100);
}
loaded();