简单版路由懒加载

最新推荐文章于 2024-09-15 17:15:28 发布

独，

最新推荐文章于 2024-09-15 17:15:28 发布

阅读量70

点赞数

分类专栏：懒加载文章标签：前端

本文链接：https://blog.csdn.net/weixin_44325434/article/details/103835267

版权

懒加载专栏收录该内容

1 篇文章 0 订阅

订阅专栏

简单版路由懒加载

如何简单快速的在浏览器中实现图片懒加载的功能呢？

1.改用H5的自定义属性保存图片地址。
2.判断图片是否出现在我们的视野。
3.将自定义属性的值赋值到图片的src属性，并添加class。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        html,body{
            margin:0;
            padding:0;
        }
        h1{
            text-align: center;
        }
        .scroll-con{
            overflow-y: auto;
            overflow-x: hidden;
   
        }
        .scroll-con-img{
            width: 80%;
            opacity: 0;
            transform: translateX(50%);
            transition: all 1s;
        }
        .fade{
            transform: translateX(0);
            opacity: 1;
            transition: all 1s;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <h1>LAZY LOAD</h1>
    <div class="scroll-con">
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt reprehenderit rem quia, ut deserunt tempora? Optio accusantium doloremque veritatis, nemo maiores velit quis! Modi illum doloremque voluptatum cumque animi amet laudantium vero, eaque, porro inventore quisquam! Magni inventore quo rem voluptatibus dicta possimus voluptatum ut error quam nam corporis, a nemo cumque dolore eveniet consequatur nobis maiores ipsam aspernatur! Ducimus, eveniet officia? Provident est at veniam sit, omnis aliquam deleniti voluptatem mollitia perspiciatis quo officiis maxime voluptate repudiandae quae asperiores corrupti! Nihil labore esse ipsa iure dolorem quo sed. Molestias accusamus libero, exercitationem aut rem ipsum officiis iure possimus. Eum?
        </p>
       
        <img class="scroll-con-img" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550389742763&di=aaed1d6b16e1814cf379e110d6de89fa&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fe4dde71190ef76c6f470e02a9716fdfaaf516714.jpg" alt="">
        <img class="scroll-con-img" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550389742763&di=a364e80479bfed61db2c3671bf7b043d&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20130725%2FImg382533437.jpg" alt="">
        <img class="scroll-con-img" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550389742762&di=84247a8a344ba9de84ba5329666176dc&imgtype=0&src=http%3A%2F%2Fpic67.nipic.com%2Ffile%2F20150512%2F18138004_183531555000_2.jpg" alt="">
		
    </div>
</body>
<script>
    const con = document.querySelector('.scroll-con')
    const imgs = document.querySelectorAll('.scroll-con-img')
    
    function lazyLoad(target){
        const io = new IntersectionObserver((entries,observer)=>{
            entries.forEach(entry => {
                if(entry.isIntersecting){
                    const img =  entry.target
                    const src = img.getAttribute('data-src')
                    img.setAttribute('src',src)
                    img.classList.add('fade')
                    observer.disconnect()
                }
            })
        },{
            root:con,
            threshold:1,
           rootMargin:'0px'
        })
        io.observe(target)
    }
    imgs.forEach(lazyLoad)
</script>
</html>