jquery懒加载、回到顶部
2016-11-21 本文已影响0人
墨月千楼
1.如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 isVisible实现
function isVisible($node){
var nodeTop=$node.offset().top,
height=$node.height(),
windowHeight=$(window).height();
if(nodeTop>=0&&nodeTop+height<=windowHeight){
console.log('在可视范围内');
}else{
console.log('不在可视范围内')
}
}
2.当窗口滚动时，判断一个元素是不是出现在窗口可视范围。每次出现都在控制台打印 true 。用代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2</title>
<style>
html,body {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 500px;
background: red;
margin: 20px;
}
</style>
</head>
<body>
<div class="cover">
</div>
<div class="nav">
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
function isVisible($node){
var nodeTop=$node.offset().top,
height=$node.height(),
windowHeight=$(window).height();
console.log(nodeTop);
console.log(windowHeight);
$(window).on('scroll',function(){
var windowTop=$(window).scrollTop(),
nodeToTop=nodeTop-windowTop;
if(nodeToTop>=0&&nodeTop+height<=windowHeight){
console.log('true');
}else{
console.log('不在可视范围内')
}
})
}
$node=$('.cover');
isVisible($node);
</script>
</body>
</html>
3.当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2</title>
<style>
html,body {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 500px;
background: red;
margin: 20px;
}
</style>
</head>
<body>
<div class="cover">
</div>
<div class="nav">
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
function isVisible($node){
var nodeTop=$node.offset().top,
height=$node.height(),
windowHeight=$(window).height();
console.log(nodeTop);
console.log(windowHeight);
var i=0;
$(window).on('scroll',function(){
var windowTop=$(window).scrollTop(),
nodeToTop=nodeTop-windowTop;
if((nodeToTop>=0)&&(nodeTop+height<=windowHeight)){
if(i==0){
console.log('true');
}
i++;
}
else{
console.log('不在可视范围内')
}
})
}
var $node=$('.cover');
isVisible($node);
</script>
</body>
</html>
4.图片懒加载的原理是什么？
一开始用同一张空白图代替要加载的图片，将要加载的图片的真实地址写在img的data-img属性里，当页面滚动到要加载的图片时，把图片的data-img属性赋给src属性，加载出要显示的图片。
这样可以在较短时间内慢慢显示较完整页面。
本文版权归作者和饥人谷所有，转载请注明出处
