首页 > 代码库 > 用jquery写的图片懒加载

用jquery写的图片懒加载

2024-09-04 04:24:57   217人阅读

<%@ 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="http://www.mamicode.com/jquery-1.12.3.min.js"></script>
<style type="text/css">

img{
width: 100%;height:500px;
border-bottom: 1px solid black;

}



</style>
</head>
<body>
<img class="lazy" data-src="http://www.mamicode.com/1.jpg">
<img class="lazy" data-src="http://www.mamicode.com/2.jpg">
<img class="lazy" data-src="http://www.mamicode.com/3.jpg">
<img class="lazy" data-src="http://www.mamicode.com/4.jpg">
<img class="lazy" data-src="http://www.mamicode.com/5.jpg">
<img class="lazy" data-src="http://www.mamicode.com/6.jpg">
<img class="lazy" data-src="http://www.mamicode.com/7.jpg">
<img class="lazy" data-src="http://www.mamicode.com/8.jpg">
<img class="lazy" data-src="http://www.mamicode.com/9.jpg">
<img class="lazy" data-src="http://www.mamicode.com/10.jpg">
<img class="lazy" data-src="http://www.mamicode.com/11.jpg">
<img class="lazy" data-src="http://www.mamicode.com/12.jpg">
<img class="lazy" data-src="http://www.mamicode.com/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>

　　

用jquery写的图片懒加载


联系
我们