<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jquery-1.12.3.min.js"></script>
<style type="text/css">
img{
100%;height:500px;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<img class="lazy" data-src="1.jpg">
<img class="lazy" data-src="2.jpg">
<img class="lazy" data-src="3.jpg">
<img class="lazy" data-src="4.jpg">
<img class="lazy" data-src="5.jpg">
<img class="lazy" data-src="6.jpg">
<img class="lazy" data-src="7.jpg">
<img class="lazy" data-src="8.jpg">
<img class="lazy" data-src="9.jpg">
<img class="lazy" data-src="10.jpg">
<img class="lazy" data-src="11.jpg">
<img class="lazy" data-src="12.jpg">
<img class="lazy" data-src="13.jpg">
<script type="text/javascript">
lazy()
$(window).scroll(function(event){
lazy()
})
function lazy(){
var juli=$(window).scrollTop()+$(window).height();
$.each($('.lazy'),function(){
var hei=$(this).offset().top+300;
console.log(hei<juli)
if(hei<juli){
$(this).attr('src',$(this).data('src'));
$(this).removeClass('lazy');
}
})
}
</script>
</body>
</html>