前端之路:jq 页面(鼠标)滚动一次只执行一次的方法。(延伸,实现图片懒加载)

该博客围绕项目展开,需求是滑动时更新并获取可见区域图片信息。具体思路是利用滚动监听实现,但遇到滚动监听执行多次,而实际只需执行一次的问题,最后提到记录成长与经验分享。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

项目需求

    滑动时更新用户所看到的图片的一些信息,获取可见区域图片的一些信息。

 

具体思路

   可以利用滚动监听,来获取可见区域照片 的 一些信息。

遇到的问题

   滚动监听会执行很多次。但是我们只需要执行一次

 

具体代码

    //为了不在滚轮滚动过程中就一直判定,设置个setTimeout,等停止滚动后再去判定是否出现在视野中。
    var clock; //这里的clock为timeID
    //滚动事件
    $(window).on('scroll',function () {

/* 如果在100毫秒内进行scroll的话,都会被clearTimeout掉,setTimeout不会执行*/
/*如果有100毫秒外的操作,会得到一个新的timeID即clock,会执行一次setTimeout,然后保存这次setTimeout的ID*/
/*对于100毫秒内的scroll事件,不会生成新的timeID值,所以会一直被clearTimeout掉,不会执行setTimeout.*/

        if (clock) { 
            clearTimeout(clock);
        }
        clock = setTimeout(function () {
              getImgInfo();
			}
        },10)
    });



/*获取可见区域图片信息 的  方法*/

function getImgInfo() {
	//可见窗口底部 距离 最顶部的高度 = 可见窗口的高度(用户所见区域) + 看不见的顶部的高度(浏览器的)
	var thisButtom = parseInt($(window).height()) + parseInt($(window).scrollTop());
	//可见窗口顶部  到   最顶部 距离
	var thisTop = parseInt($(window).scrollTop());
    //each 页面图片
	$("#comic-vertical img").each(function () {
            //获取该图片的 滚动位置(距离最顶部多远)
			 var PictureTop = parseInt($(this).offset().top);
            //检查该图片位置是否是出现在可视窗口中,处于可见窗口底部 和可见窗口顶部 之间则执行
            if (PictureTop > thisTop && PictureTop < thisButtomTop) { //在2个临界状态之间的就为出现在视野中的
                /*获取该图片信息*/
                loadInfo($(this));

				//延伸懒加载(思路就是,滚动时该图片往下的n张图 ,加载显示。)
                //懒加载原理可百度了解  (图片多却只展示 用户看的图片。而不是一下加载完)
                //判断data- 属性 存在时,替换 它 和 src 。然后清除这个属性。
                if(typeof($(this).attr("data-src"))!="undefined"){
					$(this).attr("src",function(i,origValue){
						return $(this).attr("data-src");
					});
					$(this).removeAttr("data-src");
				}
                
                //根据项目 需求  可以加  或者改思路 跟逻辑。
                

				return false
            }
        })
}

 

记录成长,经验分享,共同进步。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值