HTML前端界面懒加载

最新推荐文章于 2024-09-11 14:16:25 发布

风雅车手

最新推荐文章于 2024-09-11 14:16:25 发布

阅读量7.5k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/xaowoniu/article/details/79821954

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$(window).bind("scroll", function(event){
        $(".datagrid").each(function(){
            //窗口的高度+看不见的顶部的高度=屏幕低部距离最顶部的高度  
            var thisButtomTop = parseInt($(window).height()) + parseInt($(window).scrollTop());
			//屏幕顶部距离最顶部的高度  
            var thisTop = parseInt($(window).scrollTop()); 

            var PictureTop = parseInt($(this).offset().top);
			var flag = $(this).data('flag');
			if(!(flag == true)){
				 if (PictureTop >= thisTop && PictureTop <= thisButtomTop) {
				   $(this).append('动态内容'); 
					$(this).data('flag',true);//设置为加载完成
				}
			}
           
        });

    })
});
</script>
</head>
<body>
<div style="height:2000px;"></div>
<div class="datagrid" style="height:300px;width:300px;border:1px solid red;">
动态加载区域
</div>
</body>
</html>