页面懒加载

最新推荐文章于 2024-03-06 13:27:14 发布

小陈小陈满眼星辰

最新推荐文章于 2024-03-06 13:27:14 发布

阅读量121

点赞数

文章标签：懒加载 swiper 初始化

本文链接：https://blog.csdn.net/apple20154350217/article/details/111470717

版权

实现思路：

<body>
<ul>
<li onclick="jumpOther()">0001</li>
<li>0002</li>
<li>0003</li>
<li>0004</li>
<li>0005</li>
<li>0006</li>
<li>0007</li>
<li>0008</li>
<li>0009</li>
<li>00010</li>
<li>00011</li>
<li>00012</li>
<li>00013</li>
<li>00014</li>
<li>00015</li>
<li>00016</li>
<li>00017</li>
<li>00018</li>
<li>00019</li>
<li>00020</li>
<li class="ts">00021</li>
<li>00022</li>
</ul>
</body>

利用getBoundingClientRect()方法，只要其中的.top<=可视区域的高度即可。

<script type="text/javascript">
	$(document).ready(function () { 
		sendAsk();
		window.addEventListener("scroll",function(e){
			sendAsk();
		});
	});
    function sendAsk(){
			var lis= $('ul').find("li");
		    //swHeight=滚动的高度+窗体的高度；当li的offset高度<=swHeight,那么说明当前li显示在可视区域了
		    var swHeight=$(window).height();
	        $.each(lis, function (index, item) {
	            mTop=item.getBoundingClientRect().top;
	            console.log(mTop);
	            if(mTop<=swHeight){
	            	console.log(index+1+"个发送请求  ");
	            }
	        });
	}
</script>

具体应用：

优惠劵

小陈小陈满眼星辰

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面懒加载

实现思路：<body><ul><li onclick="jumpOther()">0001</li><li>0002</li><li>0003</li><li>0004</li><li>0005</li><li>0006</li><li>0007</li><li>0008</l
复制链接

扫一扫