1. 写一个函数isVisible判断一个元素时否出现在窗口可视范围
function isVisible($node){
var scrollTop = $(window).scrollTop();
var wHeight = $(window).height();
var offsetTop = $node.offset().top;
if(offsetTop < scrollTop + wHeight && offsetTop > scrollTop ){
console.log(true);
return true;
}
return false;
}
2. 当窗口滚动时，判断一个元素是不是出现在窗口可视范围,每次出现都在控制台打印 true
$(function(){
function isVisible($node){
var scrollTop = $(window).scrollTop();
var wHeight = $(window).height();
var offsetTop = $node.offset().top;
if(offsetTop < scrollTop + wHeight && offsetTop > scrollTop ){
console.log(true);
}
}
$(window).on("scroll",function(){
isVisible($node)
})
})
3.当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。
$(function(){
var hasCome= false;
function firstEnter($node){
if(hasCome){return}
var scrollTop = $(window).scrollTop();
var wHeight = $(window).height();
var offsetTop = $node.offset().top;
if(offsetTop < scrollTop + wHeight && offsetTop > scrollTop ){
console.log(true);
hasCome = true;
}
}
$(window).on("scroll",function(){
isVisible($node)
})
})
4. 图片懒加载的原理是什么？
当一个网站上的图片资源很多的时候，如果把资源一次性请求过来，会造成页面加载过慢，并且服务器压力也会过大。这时，如果能先请求加载用户能看到的图片，不能看到的图片先不请求，等待图片进入可视区的时候再加载，这样分批请求加载可以解决上述困境。
其原理：，先把img元素或是其他元素的背景图片路径不设置，只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。判断图片是否进入可视区，监听页面的滚动scroll事件，获取
- 滚动的距离scroll（垂直$(window).scrollTop(),水平距离$(window).srollLeft()），
- 页面可视距离window(垂直$(window).height(), 水平$(window).width()),
- 元素距离窗口边距的距离offset（垂直offset().top,水平offset().left）,
进入可视区的条件是
offset < scroll + window && offset >= scroll
5. 懒加载实例
效果→效果
