交叉观察者实现图片懒加载

最新推荐文章于 2023-10-18 16:26:44 发布

weixin_30699463

最新推荐文章于 2023-10-18 16:26:44 发布

阅读量142

点赞数

原文链接：http://www.cnblogs.com/yihuite-zch/p/11434176.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片懒加载</title>
    <style>
        .img-box{
            width: 300px;
            height: 300px;
            overflow: hidden;
            margin:30px auto;
            background-color: #f2f2f2;
        }
        .img-box img{
            max-width: 100%;
        }
    </style>
</head>
<body>
<ul>
    <li class="img-box">
        <img src="img/loading.gif" alt="" data-origin="img/smile.jpg" class="lazyload">
    </li>
    <li class="img-box">
        <img src="img/loading.gif" alt="" data-origin="img/smile.jpg" class="lazyload">
    </li>
    <li class="img-box">
        <img src="img/loading.gif" alt="" data-origin="img/smile.jpg" class="lazyload">
    </li>
    <li class="img-box">
        <img src="img/loading.gif" alt="" data-origin="img/smile.jpg" class="lazyload">
    </li>
    <li class="img-box">
        <img src="img/loading.gif" alt="" data-origin="img/smile.jpg" class="lazyload">
    </li>
    <li class="img-box">
        <img src="img/loading.gif" alt="" data-origin="img/smile.jpg" class="lazyload">
    </li>
    <li class="img-box">
        <img src="img/loading.gif" alt="" data-origin="img/smile.jpg" class="lazyload">
    </li>
    <li class="img-box">
        <img src="img/loading.gif" alt="" data-origin="img/smile.jpg" class="lazyload">
    </li>
</ul>
<script>
    //获取所有需要懒加载的img元素
    let images = document.querySelectorAll("img.lazyload");
    //创建观察器 IntersectionObserver callback options
    let observer = new IntersectionObserver(entries => {
        entries.forEach(item => {
            if (item.isIntersecting) {
                item.target.src = item.target.dataset.origin; // 开始加载图片
                observer.unobserve(item.target); // 停止监听已开始加载的图片
            }
        });
    },{
        rootMargin: "0px 0px -300px 0px"//距离上右下左
    });
    //逐个监听
    images.forEach(item => observer.observe(item));
</script>
</body>
</html>

懒加载加动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>懒加载加动画</title>
    <style>
        .img-box{
            width: 300px;
            height: 300px;
            overflow: hidden;
            margin:30px auto;
            background-color: #f2f2f2;
        }
        .img-box.show{
            animation: left 1s ease;
        }
        .img-box.show:nth-child(2n){
            animation: right 1s ease;
        }
        @keyframes left {
            from {
                opacity: 0;
                transform: translate(-100px, 20px);
            }

            to {
                opacity: 1;
            }
        }
        @keyframes right {
            from {
                opacity: 0;
                transform: translate(100px, 20px);
            }

            to {
                opacity: 1;
            }
        }
    </style>
</head>
<body>
<ul>
    <li class="img-box">
    </li>
    <li class="img-box">
    </li>
    <li class="img-box">
    </li>
    <li class="img-box">
    </li>
    <li class="img-box">
    </li>
    <li class="img-box">
    </li>
    <li class="img-box">
    </li>
    <li class="img-box">
    </li>
</ul>
<script>
    //获取所有需要懒加载的img元素
    let images = document.querySelectorAll(".img-box");
    //创建观察器 IntersectionObserver callback options
    let observer = new IntersectionObserver(entries => {
        entries.forEach(item => {
            if (item.isIntersecting) {
                item.target.src = item.target.classList.add('show'); // 开始加载图片
                observer.unobserve(item.target); // 停止监听已开始加载的图片
            }
        });
    },{
        rootMargin: "0px 0px 0px 0px"
    });
    //逐个监听
    images.forEach(item => observer.observe(item));
</script>
</body>
</html>

link：https://juejin.im/post/5d665133e51d4561c83e7c83

转载于:https://www.cnblogs.com/yihuite-zch/p/11434176.html

weixin_30699463

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
交叉观察者实现图片懒加载

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片懒加载</title> <style> .img-box{ width: 300px; ...
复制链接

扫一扫