懶加載的基本邏輯就是在網頁沒有在視窗中出現的地方的圖片等數據可以暫時不需要加載，提高網頁載入速度和用戶體驗耿眉，等待圖片出現在視窗中時葡粒，再去進行加載。
下面是如何判斷div是否出現在視窗中
源碼：
<div class="see"></div>
<script>
var div=(function(){
function see(p){
$nodeH=p.height();
$nodeoffset=p.offset().top;
$windowH=$(window).height();
$scrollTop=$(window).scrollTop();
if($nodeoffset<$windowH+$scrollTop&&$nodeoffset+$nodeH>$scrollTop){
console.log('see');
//p.data('issee', true);
}
else{
console.log('cant find it');
}
}
function scroll(p){
$(window).on('scroll', function(){
//有時已經加載的圖片不需要再去判斷是否需要加載
//if(p.data('issee')){return}
see(p);
})
}
return {
scroll:scroll
}
})()
div.scroll($('.see'));
</script>
樣列
預覽：
https://jirengu-inc.github.io/jrg-renwu8/homework/%E5%BC%A0%E8%BD%A9/renwu29-2.html
源碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>
<style>
.full{
height: 6000px;
}
.pic{
width:1080px;
height: 1080px;
}
</style>
</head>
<body>
<div class="full">
</div>
<script>
var zhangxuan=(function(){
function showimg(p){
p.attr('src', p.attr('data-src'));
p.data('isload', true);
}
function isimg(node){
node.each(function(){
var $node=$(this),
$dscrollTop=$(document).scrollTop(),
$wwidth=$(window).height(),
$picoffsetTop=$node.offset().top;
if(!!$node.data('isload')){ //優(yōu)化已加載圖片不執(zhí)行
return
}
else{
if(($dscrollTop+$wwidth)>=$picoffsetTop){
showimg($node);
}
}
})
}
function bind(node){
var clock;
$(window).on('scroll', function(){
if(clock){
clearTimeout(clock);
}
clock=setTimeout(function(){ //優(yōu)化滾輪停止時才執(zhí)行
isimg(node);
}, 300)
})
// $(window).on('scroll', function(){
// isimg(node);
// console.log(1);
// })
}
return{
bind:bind
}
})()
zhangxuan.bind($('.pic'));
</script>
</body>
</html>
