懶加載

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/

6.

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1、如何判斷一個元素是否出現(xiàn)在窗口可視范圍(瀏覽器的上邊緣和下邊緣之間,肉眼可視)。 先理解兩個概念 元素頂部“露...
    zh_yang閱讀 436評論 0 1
  • 問答 1. 如何判斷一個元素是否出現(xiàn)在窗口可視范圍(瀏覽器的上邊緣和下邊緣之間,肉眼可視)。寫一個函數(shù) isVis...
    小木子2016閱讀 232評論 0 0
  • 如何判斷一個元素是否出現(xiàn)在窗口可視范圍(瀏覽器的上邊緣和下邊緣之間,肉眼可視)。寫一個函數(shù) isVisible實現(xiàn)...
    LeeoZz閱讀 256評論 0 0
  • 1、如何判斷一個元素是否出現(xiàn)在窗口可視范圍(瀏覽器的上邊緣和下邊緣之間,肉眼可視)?寫一個函數(shù) isVisible...
    Jeff12138閱讀 300評論 0 0
  • 都說“越長大越孤單”,這話不是道理,簡直是真理。人生而孤獨,每一個人都是獨一無二的個體,每個人都不愿意孤獨,但恰恰...
    元初閱讀 482評論 0 0

友情鏈接更多精彩內(nèi)容