前端之路：jq 页面（鼠标）滚动一次只执行一次的方法。（延伸，实现图片懒加载）

项目需求

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

 

具体思路

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

遇到的问题

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

 

具体代码

    //为了不在滚轮滚动过程中就一直判定，设置个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
            }
        })
}

 

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