1.如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisible实现
function isVisible($node){
var window_scroll=$(window).scrollTop(); //滚动条滚动距离
var node_offset = $node.offset().top;//元素距离窗口顶部距离
var window_height = $(window).height();//显示窗口的高度
if(node_offset<window_scroll+window_height&&node_offset>window_scroll){
return true;
}
return false;
}
2.当窗口滚动时,判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true,以后再次出现不做任何处理。用代码实现
3.图片懒加载的原理
对窗口的‘scroll’事件进行监听,当滚动时,去判断图片是否在窗口的显示范围里,就是(图片距离窗口顶部的距离<窗口滚动的距离+窗口的高度 并且 图片距离窗口顶部的距离 > 滚动条滚动距离)。如果在范围内,就对图片进行加载,可以先将图片的地址绑定在元素的‘data-src’里,当需要加载时,通过js将‘data-src’里的值赋值给img标签的src