1. 如何判斷一個元素是否出現(xiàn)在窗口可視范圍(瀏覽器的上邊緣和下邊緣之間,肉眼可視)庶艾。寫一個函數(shù) isVisible實現(xiàn)
function isVisible($node){
var $nodeOffsetTop= $node.offset().top;
if( $(window).height() + $(window).scrollTop() > $nodeOffsetTop){
return true;
}else{
return false;
}
}
2.當(dāng)窗口滾動時,判斷一個元素是不是出現(xiàn)在窗口可視范圍解阅。每次出現(xiàn)都在控制臺打印 true 落竹。用代碼實現(xiàn)
function isVisible($node){
var $nodeOffsetTop= $node.offset().top;
if( $(window).height() + $(window).scrollTop() > $nodeOffsetTop){
return true;
}else{
return false;
}
}
$(window).on('scroll',function(){
if(isVisible($node)){
console.log('true')
}
})
3. 當(dāng)窗口滾動時,判斷一個元素是不是出現(xiàn)在窗口可視范圍货抄。在元素第一次出現(xiàn)時在控制臺打印 true,以后再次出現(xiàn)不做任何處理朱转。用代碼實現(xiàn)
var flag = true;
function isVisible($node){ var $nodeOffsetTop= $node.offset().top;
if( $(window).height() + $(window).scrollTop() > $nodeOffsetTop){
return true;
}else{
return false;
}
}
$(window).on('scroll',function(){
if(isVisible($node)&&flag){
console.log('true')
flag = false;
}
})
4. 圖片懶加載的原理是什么
我們平時加載網(wǎng)頁蟹地,不適用懶加載的話,圖片會加載完成才顯示網(wǎng)頁藤为,這樣的話網(wǎng)頁加載會很慢怪与,因此圖片懶加載就順應(yīng)而生了
圖片懶加載的原理就是,顯示器能顯示多少張圖片它就加載多少張圖片缅疟,因此這樣性能壓力就會大大減小分别,當(dāng)用戶下拉的時候才加載之前顯示器沒看到的圖片。
因此存淫,我們在可以在尚未加載的圖片添加一個data做備選耘斩,當(dāng)用戶滾輪滾到用戶所能看的位置時,通過JS把這個data轉(zhuǎn)換為img的地址桅咆,這樣就形成圖片懶加載括授。
demo
1.實現(xiàn)如下回到頂部效果
task-29-1
2.實現(xiàn)如下圖片懶加載效果
task-29-2
3.實現(xiàn)如下無限滾動效果
task-29-3
服務(wù)器測試沒有問題