如何判斷一個元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間洪鸭，肉眼可視）烤黍。寫一個函數(shù) isVisible實現(xiàn)
function isVisible($node){
var $windowHeight = $(window).height();
var $scroll = $(window).scrollTop();
var $offset = $node.offset().top;
if ($offset < $windowHeight + $scroll && $offset > $scroll) {
return true;
}
return false;
}
當(dāng)窗口滾動時，判斷一個元素是不是出現(xiàn)在窗口可視范圍先舷。每次出現(xiàn)都在控制臺打印 true 哩盲。
$(window).on('scrool', function () {
if (isVisible($node)) {
console.log('true');
}
})
function isVisible($node){
var $windowHeight = $(window).height();
var $scroll = $(window).scrollTop();
var $offset = $node.offset().top;
if ($offset < $windowHeight + $scroll && $offset > $scroll) {
return true;
}
return false;
}
當(dāng)窗口滾動時前方，判斷一個元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時在控制臺打印 true廉油，以后再次出現(xiàn)不做任何處理镣丑。
$(window).on('scrool', function () {
if (isVisible($node) && !isLoaded($node)) {
console.log('true');
}
})
function isVisible($node){
var $windowHeight = $(window).height();
var $scroll = $(window).scrollTop();
var $offset = $node.offset().top;
if ($offset < $windowHeight + $scroll && $offset > $scroll) {
$node.attr('isLoad', 'load')
return true;
}
return false;
}
function isLoaded($img) {
return $img.attr('data-src') === $img.attr('src');
}
圖片懶加載的原理是什么？
- 通俗的講就是：當(dāng)訪問一個頁面的時候娱两，先把img元素或是其他元素的背景圖片路徑替換成一張大小為1*1px圖片的路徑（這樣就只需請求一次）莺匠，只有當(dāng)圖片出現(xiàn)在瀏覽器的可視區(qū)域內(nèi)時，才設(shè)置圖片正真的路徑十兢，讓圖片顯示出來趣竣。這就是圖片懶加載摇庙。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
