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>