项目需求
滑动时更新用户所看到的图片的一些信息,获取可见区域图片的一些信息。
具体思路
可以利用滚动监听,来获取可见区域照片 的 一些信息。
遇到的问题
滚动监听会执行很多次。但是我们只需要执行一次
具体代码
//为了不在滚轮滚动过程中就一直判定,设置个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
}
})
}
记录成长,经验分享,共同进步。