1.如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
- 首先，要知道三个高度之间的关系，
窗口的高度可以通过$(window).height()获得，
窗口滚动的高度可以通过$(window).scrollTop()获得，
以及目标元素距离窗口顶部的高度距离，可以通过目标元素的$node.offset().top获得，
当元素距离顶部的高度<窗口的高度+滚动的高度，它是可见的，反之，则不可见。
function isVisible($node){
var offset=$node.offset().top;
var scrollTop=$(window).scrollTop();
winH=$(window).height();
if(offset>scrollTop+winH){
alert('不在可视范围内')
}else{
alert('在可视范围内')
}
}
2.当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
$(window).on('scroll',function(){
if(isVisible($node)){
console.log('true')
}
})
function isVisible($node){
var offset=$node.offset().top;
var scrollTop=$(window).scrollTop();
winH=$(window).height();
if(offset<scrollTop+winH){
return true
}else{
return false
}
}
3. 当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。
-
设置延迟函数延迟执行，并设置标志位，判断是否滚动，若在几秒内一直在滚动，就不执行，清处定时器的，反之，则不执行清除定时器
var clock;
$(window).on('scroll',function(){
if(clock){
clearTimeout(clock)
}
var clock=setTimeout(function(){
if(isVisible($node)&&!isLoaded($node)){
console.log('true')
}
},500)
})function isVisible($node){ var offset = $node.offset().top; var scrollTop=$(window).scrollTop(); winH = $(window).height(); if(offset<scrollTop+winH){ return true }else{ return false } } function isLoaded($node){ if(!!$node.data('src')){ return true； }else{ $node.data('src',true); return false; } }
4.图片懒加载的原理是什么？
- 一般来说一个网页上会有几百个张图片，一张大图要100K以上,如果一次性同时加载网页，向服务器发送请求，数据超过10M,这直接会导致服务器忙不过来，因为http协议是只要客户端发送请求-服务器就会响应，页面加载卡死，所以为了避免这种情况和性能优化，才出现了懒加载。
- 懒加载的原理是将不在我们浏览器的可视窗口的图片不做加载，等到用户滚动到这些不在可视区域的图片时，再去加载它，这会大大优化浏览器的性能和用户体验
- 懒加载的实现方法：在页面载入时，将页面中img标签的src指向同一张小图片或白图，这是为了避免某些浏览器当加载不出来图片时会出现X的丑陋情况，这样对于服务器来说只发送请求一次，在把真正的url地址放在一个自定义的data-src属性里，然后在获取页面的中的img标签，遍历img标签，并判断它的位置是否出现在窗口的可视区域内，如果出现在可视区域内那就把真实的url地址赋给src,让对应的img图片显示出现，同时我们还可以对已经加载过的图片img标签设置一个为 isLoaded 的属性，设置为true,这样在下次执行懒加载的时候就会判断是否已经加载过，这样会有效的过滤出已加载的图片，会大大的优化页面的加载速度和性能节省。
代码题
1.代码1
2.代码2
3.代码3
本地测试成功
4.原生JS的回到顶部效果
这是最近学习到了，比jquery感觉效果更好一点，加入定时器有了平滑的过渡到顶部，不会显得太突然。
