Skip to content

Instantly share code, notes, and snippets.

@agentfitz

agentfitz/gist:cfc60b119dc0a21ea483

Created March 16, 2015 05:31
Show Gist options
  • Save agentfitz/cfc60b119dc0a21ea483 to your computer and use it in GitHub Desktop.
Save agentfitz/cfc60b119dc0a21ea483 to your computer and use it in GitHub Desktop.
Download ZIP
quick scrollwatch infinite implementation
Raw
gistfile1.txt
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
padding: 20px;
}
img {
width: 100%;
min-height: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>Scroll to see some photos</h1>
<div class="img-container">
<img data-scroll-watch data-src="img/01.jpg">
<img data-scroll-watch data-src="img/02.jpg">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="scrollwatch.js"></script>
<script>
// img data could be from any source
var imgArr = [
"01",
"02",
"03",
"04",
"05",
"06",
"07",
"08",
"09",
"10",
"11",
"12",
"13",
"14"
];
// nab handle to image container
var $imgContainer = $(".img-container");
// how many images should I load at a time during infinite scroll
var loadBuffer = 2;
var myScrollWatch = new ScrollWatch({
onElementInView: function(obj){
var $img = $(obj.el);
$img.attr("src", $img.attr("data-src"));
},
infiniteScroll: true,
onInfiniteYInView: function(){
var $imgsInView = $("img.scroll-watch-in-view");
var htmlStr = $imgContainer.html();
var shouldLoadMoreImages = $imgsInView.length < imgArr.length;
var i;
if(shouldLoadMoreImages) {
for(i = $imgsInView.length; i < $imgsInView.length + loadBuffer; i++){
htmlStr = htmlStr + "<img data-scroll-watch data-src='img/" + imgArr[i] + ".jpg'>";
}
$imgContainer.html(htmlStr);
this.refresh();
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment