1.如何判斷一個元素是否出現(xiàn)在窗口可視范圍(瀏覽器的上邊緣和下邊緣之間,肉眼可視)。寫一個函數(shù) isVisible實現(xiàn)
代碼實現(xiàn): http://js.jirengu.com/kakaribaju/1/edit?html,css,console,output
2.當(dāng)窗口滾動時,判斷一個元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺打印 true 。用代碼實現(xiàn)
代碼實現(xiàn):同上
3.當(dāng)窗口滾動時,判斷一個元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時在控制臺打印 true,以后再次出現(xiàn)不做任何處理。用代碼實現(xiàn)。
思路:考慮給 題目中2 的代碼加一個鎖 。
var isvisible=function(jquery){
if(jquery.offset().top > $(window).scrollTop() && jquery.offset().top < $(window).scrollTop() + $(window).height()){
return true
}
return false
}
var clock=true
var isfirst=function(jquery){
if(isvisible(jquery)&&clock){
clock=false
console.log(true)
}
}
$(window).on('scroll',function(){
isfirst($('.lala'))
})
但是這樣做有一個很大的壞處,這個鎖,是一次性的。只要這個鎖被引用,它就不能再次使用了。
就是說,對一個變量來判斷是不是第一訪問這個函數(shù),依靠函數(shù)自己很難做出判斷,因為,他自己不知道自己會在什么時候被引用,會引用多少次,會被誰引用。
所以就可以考慮在傳入的變量身上做手腳,我們可以給傳進來的變量做個標(biāo)記,然后下次再查看有沒有綁定的東西就可以了。這樣就輕松的知道,這個變量是不是第一次傳遞進來了。所以,可以考慮給傳遞進來的參數(shù)加一個特殊的class?還可以像視頻當(dāng)中,改變變量的一些自身的屬性。
var isvisible=function(jquery){
if(jquery.offset().top > $(window).scrollTop() && jquery.offset().top < $(window).scrollTop() + $(window).height()){
return true
}
return false
}
function isfirst(jquery){
if(jquery.attr('firstname')==='haha'){
return false;
}
jquery.attr('firsrtname','haha')
return true;
}
$(window).on('scroll',function(){
if(isvisible($('.lala'))&&isfirst($('.lala'))){
console.log(true)
}
})
4. 圖片懶加載的原理是什么?
原理利用window的scroll事件,把我們不那么迫切需要的資源先不加載,等到我們需要時(鼠標(biāo)事件)觸發(fā),再去請求想要的資源。這樣做的好處是,一開始我們并不會完全把 用戶是不是真的要瀏覽的內(nèi)容呈現(xiàn),而是由用戶選擇呈現(xiàn)不呈現(xiàn)。用戶節(jié)省了流量,網(wǎng)站提高了性能。
5. 實現(xiàn)視頻中的圖片懶加載效果
http://js.jirengu.com/vujuhawaya/1/