- 如何判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間加叁，肉眼可視）。寫一個(gè)函數(shù) isVisible實(shí)現(xiàn)
$.fn.isVisible = function(){
var nodeT = $(this).offset().top,
screenH = $(window).height(),
scrollT = $(document).scrollTop()
if(nodeT > scrollT&&nodeT<screenH+scrollT){
return true
}
return false
}
- 當(dāng)窗口滾動(dòng)時(shí)，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍窿撬。每次出現(xiàn)都在控制臺(tái)打印 true 。用代碼實(shí)現(xiàn)
代碼效果預(yù)覽
$(document).on('scroll',function(){
var $target = $('.box-target')
if($target.isVisible()) {
console.log(true)
}
})
- 當(dāng)窗口滾動(dòng)時(shí)叙凡，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍劈伴。在元素第一次出現(xiàn)時(shí)在控制臺(tái)打印 true，以后再次出現(xiàn)不做任何處理握爷。用代碼實(shí)現(xiàn)
代碼效果預(yù)覽
function isLoad($target) {
if (!$target.data('isLoad')) {
console.log(true)
$target.data('isLoad',true)
}
}
$(document).on('scroll',function(){
var $target = $('.box-target')
if($target.isVisible()) {
isLoad($target)
}
})
- 圖片懶加載的原理是什么
- 圖片懶加載實(shí)際上是叫圖片的延遲加載
- 目的是為了優(yōu)化頁(yè)面的渲染速度,出現(xiàn)在用戶可視范圍內(nèi)的圖片才加載
- 實(shí)現(xiàn)原理
圖片可以先使用一張占位圖片顯示,真實(shí)的圖片地址保存在一個(gè)自定義的屬性當(dāng)中,當(dāng)圖片出現(xiàn)在窗口的可是范圍的時(shí)候,就將真實(shí)的地址替換掉占位圖片的地址
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
