如何判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間围小，肉眼可視）邓萨。寫一個(gè)函數(shù) isVisible實(shí)現(xiàn)
function isVisible($node){
var scrollTop=$(window).scrollTop(),
winH=$(window).height(),
offsetTop=$node.offset().top;
if(scrollTop+winH>offsetTop$$scrollTop<offsetTop){
return true;
}else{
return false;
}
}
當(dāng)窗口滾動(dòng)時(shí)矾缓，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺(tái)打印 true 须教。用代碼實(shí)現(xiàn)
$(window).on('scroll',function(){
if(isVisible($node)){
console.log(true);
}
})
當(dāng)窗口滾動(dòng)時(shí)，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍斩芭。在元素第一次出現(xiàn)時(shí)在控制臺(tái)打印 true轻腺，以后再次出現(xiàn)不做任何處理。用代碼實(shí)現(xiàn)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<p>內(nèi)容</p>
<p>內(nèi)容</p>
<p>內(nèi)容</p><p>內(nèi)容</p><p>內(nèi)容</p><p>內(nèi)容</p><p>內(nèi)容</p><p>內(nèi)容</p><p>內(nèi)容</p><p>內(nèi)容</p><p>內(nèi)容</p><p>內(nèi)容</p><p>內(nèi)容</p><p>內(nèi)容</p><p>內(nèi)容</p><p>內(nèi)容</p><p>內(nèi)容</p><p>內(nèi)容</p><p>內(nèi)容</p><p>內(nèi)容</p><p>內(nèi)容</p><p>內(nèi)容</p><p>內(nèi)容</p><p>內(nèi)容</p>
<p class="test">測(cè)試</p>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
var $test=$('.test');
$test.data('flag',true);
function isVisible($node){
var scrollTop=$(window).scrollTop(),
winH=$(window).height(),
offsetTop=$node.offset().top;
if(scrollTop+winH>offsetTop&&scrollTop<offsetTop){
return true;
}else{
return false;
}
}
$(window).on('scroll',function(){
if(isVisible($test)&&$test.data('flag')){
console.log(true);
$test.data('flag',false);
}
});
</script>
</body>
</html>
圖片懶加載的原理是什么划乖？
懶加載即曝光加載贬养，當(dāng)圖片曝光在你眼前的時(shí)候再去加載。
如果網(wǎng)頁中有較多圖片琴庵，為優(yōu)化渲染速度煤蚌，圖片可以先使用一張占位圖片顯示,真實(shí)的圖片地址保存在一個(gè)自定義的屬性當(dāng)中,當(dāng)圖片出現(xiàn)在窗口的可是范圍的時(shí)候,才將真實(shí)的地址替換掉占位圖片的地址
