1、如何判斷一個元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）？寫一個函數(shù) isVisible實現(xiàn)。
function isVisible($node){
var $scrollTop = $(window).scrollTop();
var $windowHeight = $(window).height();
var $offsetTop = $(node).offset().top;
var $nodeHeight = $(node).height();
if(($offsetTop < ($scrollTop + $windowHeight)) && (($offsetTop + $nodeHeight) > $scrollTop)){
return true;
};
return false;
};
2、當(dāng)窗口滾動時，判斷一個元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺打印 true 。用代碼實現(xiàn)。
我們可以給元素設(shè)置一個自定義屬性來模擬懶加載的情況。
當(dāng)元素出現(xiàn)在視野內(nèi)時，將這個自定義屬性的值改為true；當(dāng)元素消失時，將屬性值改為false。每當(dāng)這個屬性的值由false變?yōu)閠rue時，就打印一次true。
代碼如下：
<script>
lazyRender()
$(window).on('scroll',function(){
if(!(checkShow($('node')))){
$('node').attr('loaded','false'); //當(dāng)元素從視野中消失時，將loaded值改為false，其中l(wèi)oaded即為自定義屬性
}else{
lazyRender()
};
});
function lazyRender(){
$('node').each(function(){
if(checkShow($(this)) && !isLoaded($(this))){
loadNode($(this));
};
});
};
function checkShow($node){
var $scrollTop = $(window).scrollTop();
var $windowHeight = $(window).height();
var $offsetTop = $node.offset().top;
var $nodeHeight = $node.height();
if(($offsetTop < ($scrollTop + $windowHeight)) && (($offsetTop + $nodeHeight) > $scrollTop)){
return true;
};
return false;
};
function isLoaded($node){
return ($node.attr('loaded') === ('true'));
};
function loadNode($node){
$node.attr('loaded','true');
console.log('true')
}; //當(dāng)自定義屬性loaded變?yōu)閠rue時，即為元素出現(xiàn)，此時打印true
</script>
3、當(dāng)窗口滾動時，判斷一個元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時在控制臺打印 true，以后再次出現(xiàn)不做任何處理。用代碼實現(xiàn)。
基本思路和上一題類似。
區(qū)別在于當(dāng)元素第一次出現(xiàn)在視野內(nèi)時，改變自定義屬性的值；但當(dāng)元素消失時，不再改變自定義屬性值。這樣后期該元素再出現(xiàn)或者消失，這個自定義屬性都不會再改變，那么后臺也不會再執(zhí)行任何的命令。
代碼如下：
<script>
lazyRender()
$(window).on('scroll',function(){
lazyRender()
});
function lazyRender(){
$('node').each(function(){
if(checkShow($(this)) && !isLoaded($(this))){
loadNode($(this));
};
});
};
function checkShow($node){
var $scrollTop = $(window).scrollTop();
var $windowHeight = $(window).height();
var $offsetTop = $node.offset().top;
var $nodeHeight = $node.height();
if(($offsetTop < ($scrollTop + $windowHeight)) && (($offsetTop + $nodeHeight) > $scrollTop)){
return true;
};
return false;
};
function isLoaded($node){
return ($node.attr('loaded') === ('true'));
};
function loadNode($node){
$node.attr('loaded','true');
console.log('true')
}; //在元素第一次出現(xiàn)時打印true
</script>
4、圖片懶加載的原理是什么？
- 在原始的html代碼中，我們把所有img標(biāo)簽所對應(yīng)的真實地址放入一個自定義屬性中，如data-src；
- 當(dāng)頁面滾動時，檢查頁面上所有的img標(biāo)簽，判斷哪些標(biāo)簽出現(xiàn)在了在用戶的視野中。具體的判斷方法，可以根據(jù)窗口滾動的高度、窗口高度、元素頂部距離頁面頂部的高度和元素自身高度四者間的大小關(guān)系來判斷；
- 對于出現(xiàn)在用戶視野中的圖片，進(jìn)一步判斷它是否已經(jīng)被加載過。如果img的src屬性值等于data-src的值，則表示該圖片已經(jīng)被加載過，反之則表示該圖片沒有被加載過；
- 如果該圖片還沒有被加載過，那么就加載它。加載的方法就是將data-src的值賦給src即可。
