js监听scrolltop_JS使用onscroll、scrollTop实现图片懒加载

今天做到项目中的图片展示，由于每一页的图片数量都很多，因此需要为图片的展示设计一种懒加载的功能。

第一要做的当然就是给程序添加滚动监听事件。

1 //触发拉取图片开关，保证正在拉取时不能再次触发

2 var scrollFlag = true;3

4 //给滚动页面添加监听事件

5 $(window).scroll(function() {6 var windowHeight =$(window).height();7 var scrollHeight =$(window).scrollTop();8 var cursor = $(".pic").offset().top;9 if(windowHeight + scrollHeight > cursor + 100) {10 if(scrollFlag) {11 pullPic();12 }13 }14 });15

16 //懒加载图片请求

17 functionpullPic() {18 scrollFlag = false;19 console.log("加载图片3秒钟");20 setTimeout(function() {21 scrollFlag = true;22 }, 3000);23 }

我们来看看JS中常用的关于位置查询的函数：

onscroll

当元素的滚动条滚动时触发的事件。

onscroll事件任何实体元素都可以绑定，这里的实体元素包括window元素、document元素、DOM元素。

用法即：element.onscroll = function(){};

需要注意的是，滚动条一定要出现，而且滚动条是属于这元素的

1

2 content