題目1：如何判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間传藏，肉眼可視）剔桨。寫一個(gè)函數(shù) isVisible實(shí)現(xiàn)
function isVisible($node){
var scrollTop = $(window).scrollTop();
var viewPort = $(window).height();
var nodeTop = $node.offset().top;
if(scrollTop + viewPort >= nodeTop && scrollTop <= nodeTop + $node.outerHeight()){
return true;
}else{
return false;
}
}
題目2：當(dāng)窗口滾動(dòng)時(shí)屉更，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺(tái)打印 true 洒缀。用代碼實(shí)現(xiàn)
$(window).on('scroll', function(){
$node.each(function(){
if(isVisible($(this))){
console.log(true);
}
});
});
function isVisible($node){
var scrollTop = $(window).scrollTop();
var viewPort = $(window).height();
var nodeTop = $node.offset().top;
if(scrollTop + viewPort >= nodeTop && scrollTop <= nodeTop + $node.outerHeight()){
return true;
}else{
return false;
}
}
題目3：當(dāng)窗口滾動(dòng)時(shí)瑰谜，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時(shí)在控制臺(tái)打印 true树绩，以后再次出現(xiàn)不做任何處理萨脑。用代碼實(shí)現(xiàn)
check();
$(window).on('scroll', check());
function check(){
$node.not('.load').each(function(){
if(isVisible($(this))){
console.log(true);
}
});
}
function isVisible($node){
var scrollTop = $(window).scrollTop();
var viewPort = $(window).height();
var nodeTop = $node.offset().top;
if(scrollTop + viewPort >= nodeTop && scrollTop <= nodeTop + $node.outerHeight()){
return true;
}else{
return false;
}
}
function show($node){
$node.each(function(){
var imgUrl = $(this).attr('data-src');
$(this).attr('src', imgUrl);
$(this).addClass('load');
});
}
題目4： 圖片懶加載的原理是什么？
先將img標(biāo)簽中的src鏈接設(shè)為同一張圖片（空白圖片）葱峡，將其真正的圖片地址存儲(chǔ)再img標(biāo)簽的自定義屬性中（比如data-src）砚哗。當(dāng)js監(jiān)聽到該圖片元素進(jìn)入可視窗口時(shí)，即將自定義屬性中的地址存儲(chǔ)到src屬性中砰奕，達(dá)到懶加載的效果蛛芥。
這樣做能防止頁面一次性向服務(wù)器響應(yīng)大量請(qǐng)求導(dǎo)致服務(wù)器響應(yīng)慢提鸟，頁面卡頓或崩潰等問題。
圖片延遲加載主要是用來解決一個(gè)頁面中圖片太多仅淑，導(dǎo)致打開頁面的時(shí)候一次性加載太多圖片導(dǎo)致打開速度慢的問題〕蒲現(xiàn)在在很多網(wǎng)站上都用得很多，比如說微店涯竟，淘寶等一些圖片量較大的網(wǎng)站赡鲜，采取懶加載也是利于用戶體驗(yàn)。
原理即是網(wǎng)頁代碼中有img標(biāo)簽庐船，但是沒有src屬性银酬，只是把src原本應(yīng)該放的圖片鏈接放到另外一個(gè)屬性值去，比如說data-src筐钟，這樣瀏覽器就不能把圖片渲染出來揩瞪。但是可以通過js獲取這個(gè)圖片鏈接，通過適時(shí)把獲取到的圖片鏈接賦值給src屬性上篓冲，這樣圖片就能在適時(shí)的時(shí)候渲染出來李破，而不是一次性全部加載，而是通過鼠標(biāo)滾動(dòng)壹将，一個(gè)一個(gè)加載進(jìn)來嗤攻。
題目5： 實(shí)現(xiàn)視頻中的圖片懶加載效果
demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>lazy-loading</title>
<style>
.container{
text-align: center;
width: 900px;
list-style: none;
margin: 0 auto;
}
.container img{
width: 400px;
float: left;
margin: 10px;
}
.container:after{
content:'';
display: block;
clear: both;
}
</style>
</head>
<body>
<ul class="container">
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="" data-src="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg" alt="">
</a>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
check();
$(window).on('scroll', check);
function check(){
$('.container img').not('.load').each(function(){
if(isVisible($(this))){
show($(this));
}
});
}
function isVisible($node){
var scrollTop = $(window).scrollTop();
var viewPort = $(window).height();
var nodeTop = $node.offset().top;
if(scrollTop + viewPort >= nodeTop && scrollTop <= nodeTop + $node.outerHeight()){
return true;
}else{
return false;
}
}
function show($node){
$node.each(function(){
var imgUrl = $(this).attr('data-src');
$(this).attr('src', imgUrl);
$(this).addClass('load');
});
}
</script>
</body>
</html>
題目6： 實(shí)現(xiàn)視頻中的新聞懶加載效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
html,body,h2,p,ul,li{
margin: 0;
padding: 0;
}
a{
color: #888;
text-decoration: none;
}
.container{
max-width: 600px;
margin: 0 auto;
}
.item{
margin-top: 20px;
}
.item:after{
content: '';
display: block;
clear: both;
}
.item .thumb img{
width: 50px;
height: 50px;
}
.item .thumb {
float: left;
}
.item h2{
margin-left: 60px;
font-size: 14px;
}
.item p{
margin-left: 60px;
font-size: 14px;
margin-top: 10px;
color: #ccc;
}
.load-more{
visibility: hidden;
margin: 3px;
height: 3px;
}
</style>
</head>
<body>
<div class="container">
<ul class="news">
</ul>
<p class="load-more"></p>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
var isNewsArrive = true,
isOver = false,
pageIndex = 0;
getNews();
$(window).on('scroll', checkNews);
function getNews(){
isNewsArrive = false;
$.get('/getNews', {page: pageIndex}).done(function(ret){
isNewsArrive = true;
if(ret.status === 0){
pageIndex++;
appendHtml(ret.data)
checkNews()
}else{
alert('獲取新聞出錯(cuò)')
}
}).fail(function(){
alert('系統(tǒng)異常')
})
}
function checkNews(){
if(isVisible($('.load-more')) && !isOver && isNewsArrive){
getNews();
}
}
function appendHTML(news){
if(news.legth === 0){
isOver = true;
$('.container').append('<p>沒有更多數(shù)據(jù)了</p>');
}
var html = '';
$.each('news', function(){
html += '<li class="items">';
html += '<a href="'+ this.link + '">';
html += '<div class="thumb">  </div>';
html += '<h2>' + this.title + '</h2>';
html += '<p>' + this.brif + '</p>';
html += '</a> </li>';
})
$('.news').append(html);
}
function isVisible($node){
var scrollTop = $(window).scrollTop();
var viewPort = $(window).height();
var nodeTop = $node.offset().top;
if(scrollTop + viewPort >= nodeTop && scrollTop <= nodeTop + $node.outerHeight()){
return true;
}else{
return false;
}
}
</script>
</body>
</html>
