css样式。
.box{
height: 1200px;
}
.box-img{
margin: 0 auto;
margin-bottom: 200px;
width: 700px;
height: 360px;
background-color: aqua;
}
.box-img img{
width: 100%;
min-height: 100%;
}入代码片
实现图片懒加载先获取窗口滚动条高度$(window).scrollTop()+ $(window).outerHeight();
图片所在位置离浏览器的高度 $imgBox.outerHeight() + $imgBox.offset().top,
html
<body>
<div class="box">
123
</div>
<div class="box-img">
<img src="" alt="" data-img="1.jpg">
</div>
<div class="box-img">
<img src="" alt="" data-img="1.jpg">
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</body>
js
单个图片加载
let $imgBox = $('.box-img'),
$img = $imgBox.children('img'),
$window = $(window);
$window.on("load scroll",function(){
if($img.attr('isLoad')==='true'){ //自定义isLoad属性判断图片是否已经加载完成
return;
}
let $A = imgBox.outerHeight() + $imgBox.offset().top //图片窗口高度+图片到头部距离,
let $B = window.outerHeight() + $window.scrollTop(); //窗口高度+滚动条高度
if ($A <= $B){
$img.attr('scr',$img.attr('data-img'));
/*$img.on('load',function(){
//加载成功:fadeIn 动画
$img.stop().fadeIn();
});*/
$img.attr('isLoad',true); //添加自定义属性表示图片已经加载完成
}
})
多个图片加载
$window.on('load scroll',function(){
let $B = $window.outerHeight() + $window.scrollTop();
$imgBox.each((index,itme)=>{ //each(object, callback) 遍历指定的对象和数组
let $itme = $(itme),
$thisA = $itme.outerHeight() + $itme.offset().top,
isLoad = $itme.attr('isLoad');
if ($thisA <= $B && isLoad !== 'true'){
$itme.attr('isLoad',true);
let $img = $itme.children('img');
$img.attr('src',$img.attr('data-img'));
}
})
})