1，如何判断一个元素是否出现在窗口可视范围（浏览器的上边缘和下边缘之间，肉眼可视）。写一个函数 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 。用代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>懒加载实现</title>
<style media="screen">
.p1{
position: absolute;
top: 1200px;
}
.p2{
position: absolute;
top: 2200px;
}
.p3{
position: absolute;
top: 3200px;
}
.p4{
position: absolute;
top: 4200px;
}
</style>
</head>
<body>
<div class="scroll">
<p class="p1">hello</p>
<p class="p2">world</p>
<p class="p3">good</p>
<p class="p4">bye</p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
$(window).on('scroll',function(){
isVisible($('.p1'))
isVisible($('.p2'))
isVisible($('.p3'))
isVisible($('.p4'))
})
function isVisible($node){
var windowHeight = $(window).height(),
scrollTop = $(window).scrollTop(),
offsetTop = $node.offset().top,
nodeHeight = $node.height();
if(windowHeight + scrollTop > offsetTop && scrollTop < offsetTop + nodeHeight){
console.log(true);
};
};
</script>
</body>
</html>
3，当窗口滚动时，判断一个元素是不是出现在窗口可视范围。在元素第一次出现时在控制台打印 true，以后再次出现不做任何处理。用代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>懒加载实现</title>
<style media="screen">
.p1{
position: absolute;
top: 1200px;
}
</style>
</head>
<body>
<div class="scroll">
<p class="p1">hello</p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
$(window).on('scroll',result)
function result(){
if($('.p1').not('.show').length === 1 && isVisible($('.p1'))){
console.log('true');
$('.p1').addClass('show');
}
else if(!isVisible($('.p1'))){
console.log('false');
}
}
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>
</body>
</html>
4， 图片懒加载的原理是什么？
懒加载一共需要解决的只有两个问题：
如何定位图片位置，即触发绑定时间函数的开关
如何让图片加载出来
5，实现视频中的图片懒加载效果
6，实现视频中的新闻懒加载效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>新闻懒加载</title>
<style media="screen">
li,a,img,h4{
margin: 0;
padding: 0;
}
.ct li{
list-style: none;
}
.ct .link-box>img{
/*border: 1px solid #ccc;*/
width:40px;
height: 40px;
float: left;
}
.ct .link-box:after{
content: "";
display: block;
clear: both;
}
.ct .link-box h4{
display: inline-block;
float: left;
margin-left: 10px;
}
.ct .link-box p{
display: inline-block;
float: left;
margin-left: 10px;
margin-top: 10px;
color:#bbb;
}
.ct .link-box{
cursor: pointer;
}
.ct .link-box :active{
background-color: red;
color: white;
}
.box{
/*border: 1px solid #ccc;*/
max-width: 600px;
margin: 0 auto;
}
.btn{
border: 1px solid #ccc;
display: inline-block;
width:80px;
height: 25px;
border-radius: 5px;
text-align: center;
line-height: 25px;
margin-bottom: 30px;
cursor: pointer;
visibility: hidden;
}
.btn:hover{
background-color: red;
color:white;
}
</style>
</head>
<body>
<div class="box">
<ul class="ct">
</ul>
</div>
<a class="btn">加载更多</a>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
var pageIndex=0;
var isOver = false;
var isNewArrive = true;
getNews();
$(window).on('scroll',check);
function check(){
if(isShow($('.btn')) && !isOver && isNewArrive){
getNews();
}
}
function getNews(){
isNewArrive = false;
$.ajax({
url: "/getNews",
method: "get",
data:{
page: pageIndex,
}
}).done(function(retNews){
isNewArrive = true;
if(retNews.status === 0){
appendHTML(retNews.data);
pageIndex++;
check() //加载更多按钮出现在屏幕中就继续加载更多，解决无法滚动触发加载更多的问题
}else{
console.log('获取新闻出错')
}
}).fail(function(){
console.log("error")
})
}
function appendHTML(news){
if(news.length === 0){
// $('.btn').remove();
isOver = true;
$('.ct').append('<p>没有数据了...</p>')
}
var html = '';
$.each(news,function(){
html += '<li><a href="' + this.link + '" class="link-box">';
html += '  ';
html += '<h4>' + this.title + '</h4>';
html += '<p>' + this.brif + '</p>'; //使用this，而不是news！
html += '</a> </li>';
})
$('.ct').append(html);
};
function isShow($node){
var scrollTop = $(window).scrollTop(),
windowHeight = $(window).height(),
offsetTop = $node.offset().top,
nodeHeight = $node.outerHeight(true);
if(scrollTop + windowHeight > offsetTop && scrollTop < offsetTop + nodeHeight){
return true;
}else{
return false;
}
};
</script>
</body>
</html>