1、如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）？写一个函数 isVisible实现。
function isVisible($node){
var $scrollTop = $(window).scrollTop();
var $windowHeight = $(window).height();
var $offsetTop = $(node).offset().top;
var $nodeHeight = $(node).height();
if(($offsetTop < ($scrollTop + $windowHeight)) && (($offsetTop + $nodeHeight) > $scrollTop)){
return true;
};
return false;
};
2、当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现。
我们可以给元素设置一个自定义属性来模拟懒加载的情况。
当元素出现在视野内时，将这个自定义属性的值改为true；当元素消失时，将属性值改为false。每当这个属性的值由false变为true时，就打印一次true。
代码如下：
<script>
lazyRender()
$(window).on('scroll',function(){
if(!(checkShow($('node')))){
$('node').attr('loaded','false'); //当元素从视野中消失时，将loaded值改为false，其中loaded即为自定义属性
}else{
lazyRender()
};
});
function lazyRender(){
$('node').each(function(){
if(checkShow($(this)) && !isLoaded($(this))){
loadNode($(this));
};
});
};
function checkShow($node){
var $scrollTop = $(window).scrollTop();
var $windowHeight = $(window).height();
var $offsetTop = $node.offset().top;
var $nodeHeight = $node.height();
if(($offsetTop < ($scrollTop + $windowHeight)) && (($offsetTop + $nodeHeight) > $scrollTop)){
return true;
};
return false;
};
function isLoaded($node){
return ($node.attr('loaded') === ('true'));
};
function loadNode($node){
$node.attr('loaded','true');
console.log('true')
}; //当自定义属性loaded变为true时，即为元素出现，此时打印true
</script>
3、当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现。
基本思路和上一题类似。
区别在于当元素第一次出现在视野内时，改变自定义属性的值；但当元素消失时，不再改变自定义属性值。这样后期该元素再出现或者消失，这个自定义属性都不会再改变，那么后台也不会再执行任何的命令。
代码如下：
<script>
lazyRender()
$(window).on('scroll',function(){
lazyRender()
});
function lazyRender(){
$('node').each(function(){
if(checkShow($(this)) && !isLoaded($(this))){
loadNode($(this));
};
});
};
function checkShow($node){
var $scrollTop = $(window).scrollTop();
var $windowHeight = $(window).height();
var $offsetTop = $node.offset().top;
var $nodeHeight = $node.height();
if(($offsetTop < ($scrollTop + $windowHeight)) && (($offsetTop + $nodeHeight) > $scrollTop)){
return true;
};
return false;
};
function isLoaded($node){
return ($node.attr('loaded') === ('true'));
};
function loadNode($node){
$node.attr('loaded','true');
console.log('true')
}; //在元素第一次出现时打印true
</script>
4、图片懒加载的原理是什么？
- 在原始的html代码中，我们把所有img标签所对应的真实地址放入一个自定义属性中，如data-src；
- 当页面滚动时，检查页面上所有的img标签，判断哪些标签出现在了在用户的视野中。具体的判断方法，可以根据窗口滚动的高度、窗口高度、元素顶部距离页面顶部的高度和元素自身高度四者间的大小关系来判断；
- 对于出现在用户视野中的图片，进一步判断它是否已经被加载过。如果img的src属性值等于data-src的值，则表示该图片已经被加载过，反之则表示该图片没有被加载过；
- 如果该图片还没有被加载过，那么就加载它。加载的方法就是将data-src的值赋给src即可。
