1、如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
- 元素刚刚出现的条件：windowHeight + scrollTop = 元素的offsetTop；
- 元素刚刚消失的条件：scrollTop = 元素的offsetTop + 元素的height
-
isVisible函数如下代码：
function isVisible($node){
var windowHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
offsetTop = $node.offset().top,
nodeHeight = $node.height();
if(windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight){
return true;
}else{
return false;
}
}
2、当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true ，用代码实现
- 代码如下所示：
<div class="box"></div>
<script src="js/jquery-3.2.1.js"></script>
<script>
$(window).on("scroll",function(){
if(isVisible($(".box"))){
console.log("true");
}
});
function isVisible($node){
var windowHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
offsetTop = $node.offset().top,
nodeHeight = $node.height();
if(windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight){
return true;
}else{
return false;
}
}
</script>
-
如下图GIF所示：
2.gif
3、当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理，用代码实现
- 代码如下图所示：
<div class="box"></div>
<script src="js/jquery-3.2.1.js"></script>
<script>
$(window).on("scroll",function(){
if(isVisible($(".box")) && !($(".box").hasClass("justone"))){
console.log("true");
$(".box").addClass("justone");
}
});
function isVisible($node){
var windowHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
offsetTop = $node.offset().top,
nodeHeight = $node.height();
if(windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight){
return true;
}else{
return false;
}
}
-
如下图GIF所示：
3.gif
4、图片懒加载的原理是什么？
- 图片懒加载的原理是先不设置img的src属性，先将src上的地址存储在一个自定义的属性上，比如data-src；等到合适的时机（比如滚动条滚动到图片的顶端即img要显示的时候），把data-src上img的地址给src属性，这样图片就显示出来了
5、 实现视频中的图片懒加载效果
6、实现视频中的新闻懒加载效果
- 代码预览
-
效果如下图GIF所示：
6.gif
版权声明：本教程版权归邓攀和饥人谷所有，转载须说明来源！！！！
