08.js图片懒加载

最新推荐文章于 2024-08-28 14:58:40 发布

HdLmj

最新推荐文章于 2024-08-28 14:58:40 发布

阅读量55

点赞数

分类专栏： js 文章标签： javascript html dreamweaver

本文链接：https://blog.csdn.net/weixin_52563089/article/details/129752930

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        li{
            width: 400px;
            height: 400px;
        }
        img{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <ul>
        <li><img src="./image/0.gif" data-url="./image/1.jpg"></li>
        <li><img src="./image/0.gif" data-url="./image/2.jpg"></li>
        <li><img src="./image/0.gif" data-url="./image/3.jpg"></li>
        <li><img src="./image/0.gif" data-url="./image/4.jpg"></li>
        <li><img src="./image/0.gif" data-url="./image/5.jpg"></li>
        <li><img src="./image/0.gif" data-url="./image/6.jpg"></li>
        <li><img src="./image/0.gif" data-url="./image/7.jpg"></li>
    </ul>
</body>
<script>


    // 让盒子位于屏幕的最下面
    document.querySelector('ul').style.marginTop = window.innerHeight + 'px'
    //获取所有的img标签
    const images = document.querySelectorAll('img');
// // 方法一
//     // 懒加载事件
//     function scrl(e){
//         // 循环所有的标签  
//         let c=true;
//         images.forEach(image=>{
//             // 获取img标签与屏幕顶部的距离
//             let imageTop = image.getBoundingClientRect().top;
//             // 如果该距离小于屏幕高度，说明盒子已经出现在了屏幕的可视范围
//             if(imageTop < window.innerHeight){
//                 // 获取data-url的地址，也就是真实的图片地址
//                 let url = image.getAttribute('data-url')
//                 // 将真实地址赋给src，从而让dom渲染真实的图片地址
//                 image.src = url
//             }
//         })
//     }

//     // 监听窗口滚动事件scroll，如果窗口滚动了，就触发节流函数，
//         // 节流函数里面又有两个参数，第一个参数为需要节流的函数，第二个参数为节流时间
//     window.addEventListener('scroll',jieliu(scrl,2000))

//     // 节流函数，里面是形参，具体参数为上面事件监听传进去的参数
//       function jieliu(fn,delay){
//         // 1.设置一个参数为真
//         let flag = true;
//         return function(){
//             // 如果参数为真就执行定时器
//             if(flag){
//                 setTimeout(() => {
//                     // 执行节流函数并执行this
//                     fn.call(this);
//                     // 3.将参数flag改为true，即在执行完毕这一次的定时器，才能开启下一次的定时器
//                     // 也就是在规定的时间内只能执行一次节流函数
//                     flag = true;
//                 },delay)
//             }
//             // 2.定时器执行完毕，将falg改为false，当再次执行该函数时，
//             //  就不再执行定时器里面的节流函数，就执行一次定时器
//             flag = false
//         }
//     }

// 方法二
    // 3.观察事件
    const callback = e => {
        // 这里的e就是第二步observer.observe()所传进来的图片元素
        // 因为有多个图片元素传进来，所以需要遍历,然后每个对象又都有个isIntersecting属性，
        // 默认为false，也就是未被观察到时为false，当元素被观察到时为true，
        // 所以当它为true时我们就可以对src赋值真正的url地址
        e.forEach(is => {
            if(is.isIntersecting){
            // 获取这个图片元素的标签
            const image = is.target
            const url = image.getAttribute('data-url')
            // 将真实地址赋给src
            image.src = url
            // 赋值成功后，解除观察
            observer.unobserve(image)
            console.log('观察');
        }
        })
        
    }
    
    // 1.callback是一个回调函数，即观察到了元素触发的事件或者未观察到触发的事件
    const observer = new IntersectionObserver( callback )
    // 2.遍历图片，使每个图片都被观察
    images.forEach(image=>{
        observer.observe(image)
    })
</script>
</html>