问答
1. 如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
function isVisible($node){
var windowScroll = $(window).scrollTop(),
windowHeight = $(window).height(),
offsetTop = $node.offset().top
if(windowScroll+windowHeight>=offsetTop && windowScroll<=offsetTop){
return true;
}
else
return false;
}
2. 当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
function isVisible($node){
var windowScroll = $(window).scrollTop(),
windowHeight = $(window).height(),
offsetTop = $node.offset().top
if(windowScroll+windowHeight>=offsetTop && windowScroll<=offsetTop){
return true;
}
else
return false;
}
3. 当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<style>
li{
width: 100%;
height: 500px;
background: pink;
}
.test{
width: 100%;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="test">1</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
var isPrint = true;
$(window).on("scroll",function(){
isVisible($(".test"))
})
function isVisible($node){
var windowScroll = $(window).scrollTop(),
windowHeight = $(window).height(),
offsetTop = $node.offset().top
if(windowScroll+windowHeight>=offsetTop && windowScroll<=offsetTop){
if(isPrint){
console.log(isPrint);
isPrint = false;
}
return true;
}
else{
return false;
}
}
</script>
</body>
</html>
4. 图片懒加载的原理是什么？
当页面中有较多图片时，由于要加载大量图片，可能导致页面卡顿。所以，对于非可视范围的图片，暂时不加载，等到其滚动到可视范围内时，再行加载。
原理：将图片地址保存在自定义属性内，然后将页面img标签获取并保存，开启一个定时器，遍历保存的img标签， 判断其位置是否出现在了可视区域内。如果出现在可视区域了那么就把真实的src地址给赋值上。 并且从数组中删除，避免重复判断。
代码
1. 实现如下回到顶部效果:当页面滚动到一定距离时，窗口右下角会出现回到顶部按钮，点击按钮页面会滚动到顶部。效果预览
2. 实现如下图片懒加载效果 效果预览
3. 实现如下无限滚动效果。当页面滚动会无限加载数据展示到页面。当鼠标放置上去会变色提示：当底部加载更多按钮出现时，通过 ajax 发送请求获取数据，append 到容器里。事件绑定使用代理方式。效果预览
本文版权归本人（帘外修竹）所有，转载须说明来源
网友评论