1：如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
function isVisible ($node) {
var scrollTop = $(window).scrollTop();
var windowHeight = $(window).height();
var targetOffsetTop = $node.offset().top;
if (targetOffsetTop < (scrollTop + windowHeight) && targetOffsetTop > scrollTop) {
return true;
}
return false;
}
2,当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
//$node为目标元素
$(window).on('scroll',function () {
if (isVisible($node)) {
console.log(true);
}
});
function isVisible($node){
var scrollTop = $(window).scrollTop()
var windowHeight = $(window).height()
var offsetTop = $node.offset().top
if(offsetTop < scrollTop + windowHeight && offsetTop > scrollTop){
return true
}
return false
}
3,当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
//$node为目标元素
function checkshow ($node) {
var windowHeight = $(window).height();
var scrollTop = $(window).scrollTop();
var nodeOffsetTop = $node.offset().top;
if (nodeOffsetTop < (windowHeight + scrollTop) && nodeOffsetTop > scrollTop) {
return true;
}
else {
return false;
}
}
function firstShow ($node) {
$node.data('hasShowed',false); //自定义一个属性来标记元素是否已经被展示过了
if (checkshow($node)) {
if (!$node.data('hasShowed')) { //第一次时为false
$node.data('hasShowed',true);
console.log(true);
}
}
}
4,图片懒加载的原理是什么？
对于一个有多个图片的网站来说，访问的时候不应该直接加载所有图片，而是应该只讲浏览器窗口内的图片进行加载。当滚动的时候，在加载更多的图片。叫做图片的懒加载。
我们可以通过给img自定义一个新属性，来存储图片真实的src地址，当需要加载的时候，再将这个真实的地址赋给src，进行图片加载。
整体思路：
所以大体的思路为：
- 设置个data-src(自定义一个属性)来存放真实地址
- 当滚动页面时，检查所有的img标签，看是否出现在视野中，如果已经出现在了视野中，那继续再进行判断，看其是否已经被加载过了，如果还没有被加载过，那就进行加载。
