使用节流函数实现图片懒加载

叫一只猪
676 阅读3分钟

懒加载和预加载

懒加载实现原理：图片先用占位符表示，，不要将图片地址放到src属性中，而是放到其它属性(data-original)中 页面加载完成后，监听窗口滚动，当图片出现在视窗中时再给它赋予真实的图片地址，也就是将data-original中的属性拿出来放到src属性中。在滚动页面的过程中，通过给scroll事件绑定lazyload函数，不断的加载出需要的图片，注意：请对lazyload函数使用防抖与节流。 注意每张图要设置宽度和高度，这样每张图才有占位符。

<!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">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>照片墙懒加载</title>
    <style>
        #app {
            width: 800px;
            margin: 0 auto;
        }

        img {
            display: inline-block;
            width: 200px;
            height: 300px;
            /* border: 1px solid red; */
            margin: 5px;
        }
    </style>
</head>

<body>

    <div id="app">
        <img src="" alt="" lazyload=true
            data-original="https://pic4.zhimg.com/80/v2-e011998436428d4c032416333a4cb058_720w.jpg">
        <img src="" alt="" lazyload=true
            data-original="https://pic2.zhimg.com/80/v2-0c5d5b1401590bee6b55fb11734f0298_720w.jpg">
        <img src="" alt="" lazyload=true
            data-original="https://pic4.zhimg.com/80/v2-17d534ee853fe12109c158b5780970ff_720w.jpg">
        <img src="" alt="" lazyload=true
            data-original="https://pic1.zhimg.com/80/v2-959ef535ec78b21d48f70ebde4cd168a_720w.jpg">
        <img src="" alt="" lazyload=true
            data-original="https://pic1.zhimg.com/80/v2-f457edab6aaccd4ca4e85679ea8cb730_720w.jpg">
        <img src="" alt="" lazyload=true
            data-original="https://pic1.zhimg.com/80/v2-d5a33bd3f8b2037b00943a8bb6515c54_720w.jpg">
        <img src="" alt="" lazyload=true
            data-original="https://pic1.zhimg.com/80/v2-3717f52544ee146404594e8845e620d9_720w.jpg">
        <img src="" alt="" lazyload=true
            data-original="https://pic3.zhimg.com/80/v2-3268f96a253ae093946bb42b2639f1ac_720w.jpg">
        <img src="" alt="" lazyload=true
            data-original="https://pic3.zhimg.com/80/v2-2b7a96ba5a85644a930a82e8e3ba512f_720w.jpg">
        <img src="" alt="" lazyload=true
            data-original="https://pic4.zhimg.com/80/v2-11cfe8fe00d88bf00fb007e453faadac_720w.jpg">
        <img src="" alt="" lazyload=true
            data-original="https://pic1.zhimg.com/80/v2-f27bf527e0dcdf793dcaab1d13f1b6a8_720w.jpg">

        <img src="" alt="" lazyload=true
            data-original="https://pic4.zhimg.com/80/v2-50a26dfad91b940961dc15a4728ed92d_720w.jpg">
        <img src="" alt="" lazyload=true
            data-original="https://pic4.zhimg.com/80/v2-2ee0e476de11f96b7e32262b3144e2ae_720w.jpg">
        <img src="" lazyload=true alt=""
            data-original="https://pic4.zhimg.com/80/v2-e011998436428d4c032416333a4cb058_720w.jpg">

        <img src="" lazyload=true alt=""
            data-original="https://pic3.zhimg.com/80/v2-4caf0c9270c3f0684cfd90842259e947_720w.jpg">

        <img src="" lazyload=true alt=""
            data-original="https://pic1.zhimg.com/80/v2-3717f52544ee146404594e8845e620d9_720w.jpg">

        <img src="" lazyload=true alt=""
            data-original="https://pic2.zhimg.com/80/v2-1d30acf93a82b0b1628432a561d5c523_720w.jpg">

        <img src="" lazyload=true alt=""
            data-original="https://pic2.zhimg.com/80/v2-b1e578b6c917f9536ae06c988ddcac4b_720w.jpg">

        <img src="" lazyload=true alt=""
            data-original="https://pic1.zhimg.com/80/v2-ccb832b49df107e522822f2a83a2b42e_720w.jpg">

        <img src="" lazyload=true alt=""
            data-original="https://pic4.zhimg.com/80/v2-0d57812c2a6978d7666308ead4242209_720w.jpg">

        <img src="" lazyload=true alt=""
            data-original="https://pic3.zhimg.com/80/v2-c7006dbe924b7d30773af191bc4307c2_720w.jpg">

        <img src="" lazyload=true alt=""
            data-original="https://pic4.zhimg.com/80/v2-793920eced87452f7f480cf3706e0bb0_720w.jpg">

        <img src="" lazyload=true alt=""
            data-original="https://pic1.zhimg.com/80/v2-9a13fe29d1ab03be279282fe31f4ab54_720w.jpg">
        <img src="" lazyload=true alt=""
            data-original="https://pic1.zhimg.com/80/v2-b63b0a47b732b60517cb6fe99fc5d564_720w.jpg">

        <img src="" lazyload=true alt=""
            data-original="https://pic4.zhimg.com/80/v2-b2d00072a9c7534c26a019bdc14e837d_720w.jpg">
        <img src="" lazyload=true alt=""
            data-original="https://pic2.zhimg.com/80/v2-0f2e68bea3342b21e0e95e659faa9b8a_720w.jpg">

        <img src="" lazyload=true alt=""
            data-original="https://pic2.zhimg.com/80/v2-ca764f7f5b6c17849e210a3611e65a43_720w.jpg">
        <img src="" lazyload=true alt=""
            data-original="https://pic2.zhimg.com/80/v2-eed3e915b606295050fa21ca61925fc5_720w.jpg">
        <img src="" lazyload=true alt=""
            data-original="https://pic2.zhimg.com/80/v2-d2663a8d65ee92324dfe3ef44c9dec80_720w.jpg">
        <img src="" lazyload=true alt=""
            data-original="https://pic2.zhimg.com/80/v2-0a271add45d4b8cdfb85a891018ffcce_720w.jpg">
        <img src="" lazyload=true alt=""
            data-original="https://pic2.zhimg.com/80/v2-c3c7a7996ae3e40e2d1c01ea132356ff_720w.jpg">
        <img src="" lazyload=true alt=""
            data-original="https://pic1.zhimg.com/80/v2-9b9d67f88bb5fdbc34a652a641cfda48_720w.jpg">
        <img src="" lazyload=true alt=""
            data-original="https://pic1.zhimg.com/80/v2-3513570260a9e273b8aa5499718bf784_720w.jpg">
        <img src="" lazyload=true alt=""
            data-original="https://pic2.zhimg.com/80/v2-58cd74dcc875e1b101c56d792aae14ad_720w.jpg">
        <img src="" lazyload=true alt=""
            data-original="https://pic3.zhimg.com/80/v2-82933a790c788d938b0d782cfead6255_720w.jpg">
        <img src="" lazyload=true alt=""
            data-original="https://pic4.zhimg.com/80/v2-8c4aff083676684725e4a3e013f278cf_720w.jpg">
        <img src="" lazyload=true alt=""
            data-original="https://pic4.zhimg.com/80/v2-e3c7380d78088a92989672917b3c0bea_720w.jpg">
        <img src="" lazyload=true alt=""
            data-original="https://pic2.zhimg.com/80/v2-9752254028ba7806ace22f93a97e354c_720w.jpg">
    </div>
    <!-- built files will be auto injected -->
</body>
<script>
    function throttle(fn, delay, atleast) {
        let timer = null
        let previous = null
        return function () {
            let now = +new Date()
            if (!previous) previous = now
            if (atleast && now - previous > atleast) {
                fn()
                previous = now
                clearTimeout(timer)
            } else {
                clearTimeout(timer)
                timer = setTimeout(function () {
                    fn()
                    previous = null
                }, delay)
            }
        }
    }
    var viewHieght = document.documentElement.clientHeight //获取可视区域 就是窗口的网页每次显示的那个告诉 缩小会显示宽X高的这个高度
    console.log(viewHieght)
    function lazyload() {
        var eles = document.querySelectorAll('img[data-original][lazyload]')
        console.log("eles", eles)
        Array.prototype.forEach.call(eles, function (item, index) {
            var rect

            if (item.dataset.origin)
                return;
            rect = item.getBoundingClientRect() //获取元素在可视区域内的位置 当滚动位置发生了改变，top和left属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的）
            console.log("rec")//滚动时候看rect数组 发现是变化的 此时应该做个节流
            if (rect.bottom >= 0 && rect.top < viewHieght) {
                !function () { //而将运算符加载函数定义的前面，则是将函数看做一个整体，然后再调用这个函数，并对返回的结构进行逻辑运算
                    var img = new Image()
                    img.src = item.dataset.original
                    img.onload = function () {
                        item.src = img.src
                    }
                    item.removeAttribute('data-original')
                    item.removeAttribute('lazyload')
                }()
            }
        })
        //全部加载的时候，elem的长度为0 移除监听 以下写法不知为何解除监听失败
        if (eles.length == 0)
            window.removeEventListener('scroll', throttle(lazyload, 1000, 100))

    }
    lazyload();
    window.addEventListener('scroll', throttle(lazyload, 1000, 100))
</script>

</html>
avatar
文章
阅读
粉丝