<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Load Images with Scroll</title>
<script type="application/javascript">

//written by hossein vahabi

window.onload = function(){
loadImages();
}
window.onscroll = function(){
loadImages();
}

function loadImages(){

var tagSelect = document.getElementsByTagName('img');
var scrollPos = window.scrollY;
var windowHeight = window.innerHeight;
var newYHeight = scrollPos;
var totalHeight = scrollPos + windowHeight;


for(var i=0;i<=tagSelect.length;i++){


var imageTopPos = tagSelect.item(i).offsetTop;
var imageBottomPos = tagSelect.item(i).offsetTop;
var imageHeight = imageBottomPos-imageTopPos;

if(totalHeight >= imageTopPos){


tagSelect.item(i).style.animation = 'loadImages 1s';
tagSelect.item(i).style.animationIterationCount = '1';
tagSelect.item(i).setAttribute('src',tagSelect.item(i).getAttribute('data-src'));


}else if(imageHeight <= newYHeight){

tagSelect.item(i).style.animation = 'unloadImages 1s';
tagSelect.item(i).style.animationIterationCount = '1';
tagSelect.item(i).setAttribute('src','#');

}


}

}

</script>
<style type="text/css">

@keyframes loadImages{
0%{opacity:0.5;}
20%{opacity:0.6;}
50%{opacity:0.7;}
80%{opacity:0.8;}
100%{opacity:0.9;}
}
@keyframes unloadImages{
0%{opacity:0.9;}
20%{opacity:0.8;}
50%{opacity:0.7;}
80%{opacity:0.6;}
100%{opacity:0.5;}
}

</style>

</head>

<body>

<div><img src="#" data-src="images/1.jpg" width="412" height="300" style="margin-bottom:600px;" alt="img1" /></div>

<div><img src="#" data-src="images/2.jpg" width="412" height="300" style="margin-bottom:600px;" alt="img2" /></div>

<div><img src="#" data-src="images/3.jpg" width="412" height="300" style="margin-bottom:600px;" alt="img3" /></div>

<div><img src="#" data-src="images/4.jpg" width="412" height="300" style="margin-bottom:600px;" alt="img4" /></div>


</body>
</html>