如何判斷一個元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）惋鹅。寫一個函數(shù) isVisible實現(xiàn)
function isVisible($node){
var winH = $(window).height(),
winS = $(window).scrollTop(),
nodeHeight = $node.height(),
nodeTop = $node.offset().top;
if(winH + winS >= nodeTop && winS < nodeTop + nodeHeight){
return true;
}else{
return false;
}
}
當(dāng)窗口滾動時则酝，判斷一個元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺打印 true 闰集。用代碼實現(xiàn)
function isVisible($node){
$(window).on('scroll',function(){
var winH = $(window).height(),
winS = $(window).scrollTop(),
nodeHeight = $node.height(),
nodeTop = $node.offset().top;
if(winH + winS >= nodeTop && winS < nodeTop + nodeHeight ){
console.log(true);
}else{
console.log(false);
}
});
}
isVisible($node);
當(dāng)窗口滾動時沽讹，判斷一個元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時在控制臺打印true武鲁，以后再次出現(xiàn)不做任何處理爽雄。用代碼實現(xiàn)
function isVisible($node){
$(window).on('scroll',function(){
var winH = $(window).height(),
winS = $(window).scrollTop(),
nodeHeight = $node.height(),
nodeTop = $node.offset().top;
if(winH + winS >= nodeTop && winS < nodeTop + nodeHeight ){
if(!$node.attr("data-sc")){
console.log(true);
$node.attr("data-sc",true);
}else{
return;
}
}else{
return;
}
});
}
isVisible($node);
圖片懶加載的原理是什么？
在頁面載入的時候?qū)㈨撁娴膇mg的地址指向一個小的的同樣的白色圖片沐鼠，將真實的圖片地址放在創(chuàng)建的自定義屬性中如：
<img src="small.png" data-src="true.png">
src為小圖地址挚瘟，data-src為真實地址。
當(dāng)圖片出現(xiàn)在窗口可視區(qū)域時饲梭，將自定義屬性里的真實圖片地址賦給src為懶加載的實現(xiàn)原理乘盖。
代碼
- 本博客版權(quán)歸羞澀的澀和饑人谷所有，轉(zhuǎn)載請注明出處
