如何判斷一個元素是否出現(xiàn)在窗口可視范圍(瀏覽器的上邊緣和下邊緣之間,肉眼可視)。寫一個函數(shù) isVisible實現(xiàn)
function isVisible(node){ var windowHeight = $(window).height(); var scrollTop = $(window).scrollTop(); var top = $node.offset().top; if( windowHeight + scrollTop > top $$ windowHeight + scrollTop<top+$node.outHeight()){ return true }else{ return false } }
當(dāng)窗口滾動時,判斷一個元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺打印 true 。用代碼實現(xiàn)
$(window).on("scroll",function(){ if(isVisible(node)){ console.log(true); } })
當(dāng)窗口滾動時,判斷一個元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時在控制臺打印 true,以后再次出現(xiàn)不做任何處理。用代碼實現(xiàn)
$(window).on("scroll",function(){ if(isVisible(node) $$ !$node.data("hasLoad")){ console.log(true); $node.data("hasLoad",true) } })
圖片懶加載的原理是什么?
原理:先將img標(biāo)簽中的src鏈接設(shè)為同一張圖片(空白圖片),將其真正的圖片地址存儲再img標(biāo)簽的自定義屬性中(比如data-src)。當(dāng)js監(jiān)聽到該圖片元素進入可視窗口時,即將自定義屬性中的地址存儲到src屬性中,達到懶加載的效果。
這樣做能防止頁面一次性向服務(wù)器響應(yīng)大量請求導(dǎo)致服務(wù)器響應(yīng)慢,頁面卡頓或崩潰等問題。
題目五:
https://shaozhiyuan.github.io/blog/%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD