new IntersectionObserver() 使用实现图片懒加载

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>使用IntersectionObserver实现懒加载</title>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        ul,li {
            list-style: none;
        }
        .list {
            width: 800px;
            margin: 0 auto;
        }
        .list ul {
            width: 100%;
            overflow: hidden;
        }
        .list ul li {
            float: left;
            width: 185px;
            height: 400px;
            margin-bottom: 10px;
            margin-left: 10px;
            background-color: #ccc;
            overflow: hidden;
            text-align: center;
            line-height: 400px;
            color: red;
            font-size: 24px;
        }

    </style>
</head>
<body>

<div class="list">
    <ul>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
        <li class="lazy-loaded">
            <template>
                <img src="https://www.baidu.com/img/baidu_jgylogo3.gif" width="100%" height="100%" border="0"/>
            </template>
            <span class="loading">正在加载...</span>
        </li>
    </ul>
</div>

</body>
<!--  -->
<script type="text/javascript">
    //获取dom
    function filterDom(selector) {
        //
        return Array.from(document.querySelectorAll(selector));
    }
    //事件观察者
    var observer = new IntersectionObserver(observerCall,{
        root: null,
        rootMargin : '0px 0px 20px 0px',
        threshold:[0, 1]
    });

    function observerCall(changes) {
        changes.forEach(function(change) {
            setTimeout(function(){
                if(change.intersectionRatio > 0){
                    var container = change.target;
                    var content = container.querySelector('template').content;
                    container.appendChild(content);
                    container.querySelector('.loading').style.display = 'none';
                    observer.unobserve(container);
                }

            }, 100);
        });
    }
    //过滤元素
    filterDom('.lazy-loaded').forEach(function (item) {
        observer.observe(item);
    });
</script>
</html>

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3 中可以使用 Intersection Observer API 来实现懒加载。Intersection Observer API 可以观察一个元素是否进入了视口(viewport)或者离开了视口。 首先,你需要创建一个指令来实现懒加载: ```javascript const lazyLoad = { mounted(el, binding) { let options = { rootMargin: '0px', threshold: 0.1 }; const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { binding.value(); observer.unobserve(el); } }); }, options); observer.observe(el); } } export default lazyLoad; ``` 在这个指令中,我们使用Intersection Observer API 来观察元素是否进入了视口。当元素进入视口时,我们会调用指令传入的回调函数。 接下来,在组件中使用这个指令: ```html <template> <div class="container"> <img v-lazyload="loadImage" :data-src="imageUrl" /> </div> </template> <script> import lazyLoad from "@/directives/lazyLoad"; export default { directives: { lazyload: lazyLoad }, data() { return { imageUrl: "https://example.com/image.jpg" }; }, methods: { loadImage() { const img = new Image(); img.onload = () => { this.$el.setAttribute("src", this.imageUrl); this.$el.removeAttribute("data-src"); }; img.src = this.imageUrl; } } }; </script> ``` 在这个例子中,我们在图片上使用指令 `v-lazyload`,并且传入了一个回调函数 `loadImage`。当图片进入视口时,指令会调用 `loadImage` 函数来加载图片。 在 `loadImage` 函数中,我们创建一个新的 `Image` 对象,并设置其 `onload` 回调函数。当图片加载完成时,我们将图片的 `src` 属性设置为 `imageUrl`,并移除 `data-src` 属性,以此来显示图片。 希望这个例子可以帮助你实现 Vue 3 中的懒加载。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值