js原生实现移动端图片懒加载

最新推荐文章于 2022-12-08 17:24:30 发布

cigailaogai8868

最新推荐文章于 2022-12-08 17:24:30 发布

阅读量220

点赞数

原文链接：https://my.oschina.net/u/3463305/blog/1920347

版权

需求背景：做了一个图片很多的H5页面，总大小500kb左右，不想依赖插件用原生js写一个懒加载方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img{
            display: block;
            max-height: 300px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>懒加载页面</h1>
        <img src="1.png" data-src='1.jpg' alt="">
        <img src="1.png" data-src='2.jpg' alt="">
        <img src="1.png" data-src='3.jpg' alt="">
        <img src="1.png" data-src='4.jpg' alt="">
        <img src="1.png" data-src='5.jpg' alt="">
        <img src="1.png" data-src='6.jpg' alt="">
        <img src="1.png" data-src='7.jpg' alt="">
        <img src="1.png" data-src='8.jpg' alt="">
        <img src="1.png" data-src='9.jpg' alt="">
    </div>
</body>
</html>
<script>
window.onload = function(){
    var scrollTop = window.scrollY;
    var imgs = Array.from(document.querySelectorAll('img'));

    lazyLoad();

    window.onscroll = () => {
        scrollTop = window.scrollY;
        lazyLoad(); 
    }
    function lazyLoad(){
        imgs.forEach((item,index)=>{
            if( item.offsetTop < window.innerHeight + scrollTop ){
                console.log(item.offsetTop)
                item.setAttribute('src',item.dataset.src)
            }
        })
    }
}    
</script>

使用以上方法便可以实现一个简单的图片懒加载

转载于:https://my.oschina.net/u/3463305/blog/1920347

cigailaogai8868

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js原生实现移动端图片懒加载

需求背景：做了一个图片很多的H5页面，总大小500kb左右，不想依赖插件用原生js写一个懒加载方法 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫