jQuery图片懒加载

最新推荐文章于 2021-09-24 09:28:04 发布

RDe

最新推荐文章于 2021-09-24 09:28:04 发布

阅读量119

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_45052227/article/details/102657030

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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'));
                }
            })
        })

RDe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery图片懒加载

css样式。.box{ height: 1200px; } .box-img{ margin: 0 auto; margin-bottom: 200px; width: 700px; height: 360px; back...
复制链接

扫一扫

专栏目录